Add hello-world example

config.yaml

@@ -5,9 +5,13 @@ theme: hugo-fresh
 
 menu:
   docs:
+    - identifier: getting-started
+      name: Getting started
+      url: /docs/getting-started/
+      weight: 100
     - identifier: tutorials
       name: Tutorials
-      url: /docs/tutorials
+      url: /docs/tutorials/
       weight: 200
     - identifier: spec
       name: Specification

content/docs/getting-started.md → content/docs/getting-started/_index.md

@@ -1,9 +1,8 @@
 ---
 title: "Getting started"
 date: 2019-02-16T13:56:52+01:00
-menu:
-  docs:
-weight: 100
+categories:
+- getting-started
 aliases:
 - '/v1/guide/'
 - '/v1/guide/index.html'

content/docs/getting-started/hello-world.md

@@ -0,0 +1,82 @@
+---
+title: "Hello world"
+date: 2019-04-01T10:56:52+01:00
+menu:
+  docs:
+    parent: 'getting-started'
+weight: 101
+---
+
+Let's define an application that's capable of receiving a "hello {name}" message.
+
+```yaml
+asyncapi: '2.0.0'
+id: hello-world-app
+channels:
+  hello:
+    subscribe:
+      message:
+        payload:
+          type: string
+          pattern: '^hello .+$'
+```
+
+Let's get into the details of the sample specification:
+
+<pre class="language-yaml line-numbers" data-line="1,2"><code>asyncapi: '2.0.0'
+id: hello-world-app
+channels:
+  hello:
+    subscribe:
+      message:
+        payload:
+          type: string
+          pattern: '^hello .+$'</code></pre>
+
+The first line of the specification starts with the document type (AsyncAPI) and the version (2.0.0) as a recommended practice.
+
+The second line identifies the application and is both required and unique. In a real environment using 'urn:com:mycompany:hello-world-app' is considered unique and preferred rather than 'hello-world-app', for example.
+
+<pre class="language-yaml line-numbers" data-line="3-9"><code>asyncapi: '2.0.0'
+id: hello-world-app
+channels:
+  hello:
+    subscribe:
+      message:
+        payload:
+          type: string
+          pattern: '^hello .+$'</code></pre>
+
+The 'channels' section of the specification houses all of the mediums where messages flow through. For example, some systems use 'topic, 'event name' or 'routing key'. Different kinds of information flow through each channel similar to the analogy of TV channels.
+
+In our example, we only have one channel called `hello`. The sample app subscribes to this channel to receive "hello {name}" messages.
+
+<pre class="language-yaml line-numbers" data-line="4-7"><code>asyncapi: '2.0.0'
+id: hello-world-app
+channels:
+  hello:
+    subscribe:
+      message:
+        payload:
+          type: string
+          pattern: '^hello .+$'</code></pre>
+
+You can read the highlighted lines as "this is the **payload** of the **message** your app is **subscribed** to on the «**hello**» channel".
+
+<pre class="language-yaml line-numbers" data-line="7-9"><code>asyncapi: '2.0.0'
+id: hello-world-app
+channels:
+  hello:
+    subscribe:
+      message:
+        payload:
+          type: string
+          pattern: '^hello .+$'</code></pre>
+
+The 'payload' object defines how the message must be structured. In this example, the message must be a string and match the given regular expression in the format "hello {name}" string.
+
+## Conclusion
+
+We've seen how to define our simple Hello World app but, **how do we send a message to our Hello World application?**
+
+Go to the next chapter to [learn more about the `servers` property](/docs/servers).

themes/hugo-fresh/layouts/_default/list.html

@@ -1,17 +1,21 @@
 {{ define "main" }}
 <div class="container" style="padding:0 2rem;margin-top:30px;">
     <div class="columns">
-        <div class="column is-3 is-hidden-mobile is-hidden-tablet-only">
+        <div class="column is-3">
             {{ partial "docs/sidebar.html" . }}
         </div>
         <div class="column is-9 is-centered-tablet-portrait">
-            <h1 class="title section-title">{{ .Title }}</h1>
-            <div class="docs-content">
-                {{ range .Pages }}
-                <a href="{{.URL}}">{{.Title}}</a>
-                {{ .Render "summary"}}
-                {{ end }}
-            </div>
+            {{ if .Content }}
+                {{ partial "docs/content.html" . }}
+            {{ else }}
+                <h1 class="title section-title">{{ .Title }}</h1>
+                <div class="docs-content">
+                    {{ range .Pages }}
+                    <a href="{{.URL}}">{{.Title}}</a>
+                    {{ .Render "summary"}}
+                    {{ end }}
+                </div>
+            {{ end }}
         </div>
     </div>
 </div>

themes/hugo-fresh/layouts/docs/single.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 <div class="container" style="padding:0 2rem;margin-top:30px;">
     <div class="columns">
-        <div class="column is-3 is-hidden-mobile is-hidden-tablet-only">
+        <div class="column is-3">
             {{ partial "docs/sidebar.html" . }}
         </div>
         <div class="column is-9 is-centered-tablet-portrait">

themes/hugo-fresh/layouts/partials/docs/sidebar.html

@@ -5,10 +5,14 @@ <h3>Menu</h3>
         {{ range .Site.Menus.docs }}
         {{ if .HasChildren }}
         <li>
-            <a href="{{ .URL }}">
-                {{ .Pre }}
-                <span>{{ .Name }}</span>
-            </a>
+            {{ if $currentPage.IsMenuCurrent "docs" . }}
+                <span class="active">{{ .Name }}</span>
+            {{ else }}
+                <a href="{{ .URL }}">
+                    {{ .Pre }}
+                    <span>{{ .Name }}</span>
+                </a>
+            {{ end }}
         </li>
         <ul class="sub-menu">
             {{ range .Children }}