Now can display content in tabs with a title for each tab. Useful for…

… code samples in different languages and operating systems. Converted getting started page to use tabs for code samples

Gemfile

@@ -7,7 +7,7 @@ source "https://rubygems.org"
 #
 # This will help ensure the proper Jekyll version is running.
 # Happy Jekylling!
-gem "jekyll", "~> 4.3.2"
+gem "jekyll"
 # This is the default theme for new Jekyll sites. You may change this to anything you like.
 gem "minima", "~> 2.5"
 # If you want to use GitHub Pages, remove the "gem "jekyll"" above and
@@ -16,6 +16,7 @@ gem "minima", "~> 2.5"
 # If you have any plugins, put them here!
 group :jekyll_plugins do
   gem "jekyll-feed", "~> 0.12"
+  gem "jekyll-tabs"
 end
 
 # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
@@ -36,3 +37,5 @@ gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
 gem "jekyll-remote-theme"
 gem "just-the-docs", "0.5.1", group: :jekyll_plugins
 gem "jekyll-include-cache"
+gem "kramdown-parser-gfm"
+gem "webrick"

Gemfile.lock

@@ -11,27 +11,22 @@ GEM
     eventmachine (1.2.7)
     ffi (1.15.5)
     forwardable-extended (2.6.0)
-    google-protobuf (3.24.1-aarch64-linux)
-    google-protobuf (3.24.1-arm64-darwin)
     http_parser.rb (0.8.0)
     i18n (1.14.1)
       concurrent-ruby (~> 1.0)
-    jekyll (4.3.2)
+    jekyll (3.9.3)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
-      i18n (~> 1.0)
-      jekyll-sass-converter (>= 2.0, < 4.0)
+      i18n (>= 0.7, < 2)
+      jekyll-sass-converter (~> 1.0)
       jekyll-watch (~> 2.0)
-      kramdown (~> 2.3, >= 2.3.1)
-      kramdown-parser-gfm (~> 1.0)
+      kramdown (>= 1.17, < 3)
       liquid (~> 4.0)
-      mercenary (>= 0.3.6, < 0.5)
+      mercenary (~> 0.3.3)
       pathutil (~> 0.9)
-      rouge (>= 3.0, < 5.0)
+      rouge (>= 1.7, < 4)
       safe_yaml (~> 1.0)
-      terminal-table (>= 1.8, < 4.0)
-      webrick (~> 1.7)
     jekyll-feed (0.17.0)
       jekyll (>= 3.7, < 5.0)
     jekyll-include-cache (0.2.1)
@@ -41,10 +36,12 @@ GEM
       jekyll (>= 3.5, < 5.0)
       jekyll-sass-converter (>= 1.0, <= 3.0.0, != 2.0.0)
       rubyzip (>= 1.3.0, < 3.0)
-    jekyll-sass-converter (3.0.0)
-      sass-embedded (~> 1.54)
+    jekyll-sass-converter (1.5.2)
+      sass (~> 3.4)
     jekyll-seo-tag (2.8.0)
       jekyll (>= 3.8, < 5.0)
+    jekyll-tabs (1.1.1)
+      jekyll (>= 3.0, < 5.0)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
     just-the-docs (0.5.1)
@@ -59,7 +56,7 @@ GEM
     listen (3.8.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    mercenary (0.4.0)
+    mercenary (0.3.6)
     minima (2.5.1)
       jekyll (>= 3.5, < 5.0)
       jekyll-feed (~> 0.9)
@@ -72,33 +69,33 @@ GEM
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     rexml (3.2.6)
-    rouge (4.1.3)
+    rouge (3.30.0)
     rubyzip (2.3.2)
     safe_yaml (1.0.5)
-    sass-embedded (1.66.1-aarch64-linux-gnu)
-      google-protobuf (~> 3.23)
-    sass-embedded (1.66.1-arm64-darwin)
-      google-protobuf (~> 3.23)
-    terminal-table (3.0.2)
-      unicode-display_width (>= 1.1.1, < 3)
-    unicode-display_width (2.4.2)
+    sass (3.7.4)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
     webrick (1.8.1)
 
 PLATFORMS
-  aarch64-linux
   arm64-darwin-22
 
 DEPENDENCIES
   http_parser.rb (~> 0.6.0)
-  jekyll (~> 4.3.2)
+  jekyll
   jekyll-feed (~> 0.12)
   jekyll-include-cache
   jekyll-remote-theme
+  jekyll-tabs
   just-the-docs (= 0.5.1)
+  kramdown-parser-gfm
   minima (~> 2.5)
   tzinfo (>= 1, < 3)
   tzinfo-data
   wdm (~> 0.1.1)
+  webrick
 
 BUNDLED WITH
    2.4.9

_config.yml

@@ -14,6 +14,6 @@ aux_links:
 
 plugins:
   - jekyll-remote-theme
+  - jekyll-tabs
 
 logo: "/images/specmatic-logo.png"
-

_includes/head_custom.html

@@ -0,0 +1,2 @@
+<link rel="stylesheet" href="/css/plugin-jekyll-tabs.css">
+<script src="/js/plugin-jekyll-tabs.js"></script>

_includes/setup_command_line.md

@@ -1,19 +1,62 @@
-Download the standalone Jar.
+The quickest approach to getting started is through the command line. There are two ways specmatic is distributed for command line usage, one via jar and another via npm package
 
-<https://github.com/znsio/specmatic/releases/download/{{ site.latest_release }}/specmatic.jar>
+{% tabs install %}
+{% tab install java %}
+Download the standalone jar from [here](<https://github.com/znsio/specmatic/releases/download/{{ site.latest_release }}/specmatic.jar>) to a location on your computer
 
-#### Mac / Linux
+Run specmatic as below to list all the options available
+```bash
+java -jar specmatic.jar
+```
+{% endtab %}
+{% tab install npm %}
+
+Install specmatic npm package
 
+``` bash
+npm install -g specmatic
 ```
-alias specmatic='java -jar <basedir>/specmatic.jar'
+
+Run specmatic by
+
+``` bash
+$ npx specmatic
 ```
+{% endtab %}
+{% endtabs %}
+
+---
+### Tip to run java jar easily
+
+By following below tip running `java -jar specmatic.jar` everytime can be avoided
 
-#### Windows
+{% tabs hint-java %}
+{% tab hint-java mac/linux %}
 
-Create a batch file with below content.
+Add this to the startup script of your shell like `~/.bashrc` or `~/.zshrc`
 
+``` bash
+alias specmatic='java -jar <path-to-jar>/specmatic.jar'
 ```
-java -jar <basedir>/specmatic.jar %*
+
+Run specmatic by
+
+``` bash
+$ specmatic <options>
+```
+{% endtab %}
+{% tab hint-java windows %}
+Create a batch file (`specmatic.bat`) with below content and add it your system path.
+
+```  bash
+java -jar <path-to-jar>/specmatic.jar %*
 ```
+The %* portion at the end tells the batch script to pass all of the parameters it receives to the new command.
+
+Run specmatic by
 
-The %* portion tells the batch script to pass all of the parameters it receives to the new command.
+``` bash
+C:\> specmatic.bat <options>
+```
+{% endtab %}
+{% endtabs %}

css/plugin-jekyll-tabs.css

@@ -0,0 +1,52 @@
+.tab {
+    display: flex;
+    flex-wrap: wrap;
+    margin-left: -20px;
+    padding: 0;
+    list-style: none;
+    position: relative;
+}
+
+.tab > * {
+    flex: none;
+    padding-left: 20px;
+    position: relative;
+}
+
+.tab > * > a {
+    display: block;
+    text-align: center;
+    padding: 9px 20px;
+    color: #999;
+    border-bottom: 2px solid transparent;
+    border-bottom-color: transparent;
+    font-size: 12px;
+    text-transform: uppercase;
+    transition: color .1s ease-in-out;
+    line-height: 20px;
+}
+
+.tab > .active > a {
+    color:#222;
+    border-color: #1e87f0;
+}
+
+.tab-content > li::before, .tab > li::before {
+    content: ""!important;
+}
+
+.tab > li > a {
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.tab-content {
+    padding: 0;
+}
+
+.tab-content > li {
+    display: none;
+}
+.tab-content > li.active {
+    display: initial;
+}

getting_started.md

@@ -15,12 +15,8 @@ Getting started
 
 ### Setup
 
-The quickest approach to getting started is through the command line.
-
 {% include setup_command_line.md %}
 
-For nodejs projects, please visit [npmjs](https://www.npmjs.com/package/specmatic).
-
 ---
 
 ### Example Application - PetStore
@@ -96,9 +92,18 @@ curl https://my-json-server.typicode.com/znsio/specmatic-documentation/pets/1
 ```
 
 Now lets leverage Specmatic to run the above specification as a test against the Provider / API to see if it is adhering the OpenAPI Specification.
+{% tabs test %}
+{% tab test java %}
 ```shell
 specmatic test service.yaml --testBaseURL=https://my-json-server.typicode.com/znsio/specmatic-documentation
 ```
+{% endtab %}
+{% tab test npm %}
+```shell
+npx specmatic test service.yaml --testBaseURL=https://my-json-server.typicode.com/znsio/specmatic-documentation
+```
+{% endtab %}
+{% endtabs %}
 
 This should print out a result that looks something like this.
 ```shell
@@ -161,10 +166,18 @@ Now lets try something more interesting. Restore the OpenAPI file to its [origin
 ```
 
 Let us run the specmatic test command again.
+{% tabs test2 %}
+{% tab test2 java %}
 ```shell
 specmatic test service.yaml --testBaseURL=https://my-json-server.typicode.com/znsio/specmatic-documentation
 ```
-
+{% endtab %}
+{% tab test2 npm %}
+```shell
+npx specmatic test service.yaml --testBaseURL=https://my-json-server.typicode.com/znsio/specmatic-documentation
+```
+{% endtab %}
+{% endtabs %}
 This time around the test fails because the response from our sample app is not in line with the OpenAPI Specification.
 ```shell
 Unsuccessful Scenarios:
@@ -200,15 +213,22 @@ Here the Specmatic Stub is emulating the Provide / API.
 Before we begin, please make sure that your service.yaml file is restored to its [original shape](/getting_started.html#api-specification).
 
 To spin up a stub server with the service.yaml we authored earlier, run below command.
-
+{% tabs stub %}
+{% tab stub java %}
 ```shell
 specmatic stub service.yaml
 ```
+{% endtab %}
+{% tab stub npm %}
+```shell
+npx specmatic stub service.yaml
+```
+{% endtab %}
+{% endtabs %}
 
-This should start your stub server on port 9000 by default (you can switch the port number by adding ```--port <port of your choice>``` to the above command).
+This should start your stub server on port 9000 by default (you can switch the port number by adding ```--port <port of your choice>``` to the above command) as below.
 
 ```shell
-specmatic stub service.yaml
 Loading service.yaml
 Stub server is running on http://0.0.0.0:9000. Ctrl + C to stop.
 ```
@@ -249,9 +269,18 @@ The response contains auto-generated values that adhere to the data type defined
 ```
 
 Now let us run the stub command again.
+{% tabs stub2 %}
+{% tab stub2 java %}
 ```shell
 specmatic stub service.yaml
 ```
+{% endtab %}
+{% tab stub2 npm %}
+```shell
+npx specmatic stub service.yaml
+```
+{% endtab %}
+{% endtabs %}
 
 This time you should see Specmatic load your canned response file also.
 ```shell
@@ -277,9 +306,8 @@ Specmatic will now return your canned response for petId 1. For any other petId
 
 So what is so smart about Specmatic Smart Mocks.
 
-Let us try a few experiments. Remove the "status" field in scooby.json and run the stub command again.
+Let us try a few experiments. Remove the "status" field in scooby.json and run the stub command again. You should an output like below.
 ```shell
-specmatic stub service.yaml
 Loading service.yaml
   Loading stub expectations from /<dir with service.yaml>/service_data
   Reading the following stub files: