Merge pull request #165 from chrisrueger/improve-prev-next-links

Improve prev next links, sidebar, add migrate more tutorials
bndtools · Mar 26, 2024 · 46405e3 · 46405e3
2 parents 36373c8 + c4db74c
commit 46405e3
Show file tree

Hide file tree

Showing 41 changed files with 3,663 additions and 71 deletions.
diff --git a/_book/150-tutorials.md b/_book/150-tutorials.md
@@ -5,6 +5,19 @@ layout: default
 
 This section is an entry to the hopefully growing collection of tutorials that OSGi enRoute provides. If you want to develop an additional tutorial, please submit a PR.
 
+## Quick Start
+
+![Thumbnail for Quick start Tutorial](/img/qs/app-0.png)
+{: .thumb200-l }
+
+In this quick start we develop a little project that, creates a single page web-application. This tutorial is light on the explanations because it focuses on introducing the overall architecture of enRoute, not the details.  We will cover the whole chain, from creating a workspace all the way to continuous integration.
+
+A disclaimer. This quick start is about learning to use OSGi enRoute, not about learning Java, Git, nor Eclipse. It is assumed that you have basic experience with these tools.
+
+[Go to the Quick  Start tutorial](/qs/050-start.html)
+
+{: style='clear:both;' }
+
 ## Base Tutorial
 
 ![Thumbnail for Base Tutorial](/img/tutorial_base/debug-xray-1.png)
@@ -16,6 +29,24 @@ The Base Tutorial is a very extensive tutorial that takes you to all the princip
 
 {: style='clear:both;' }
 
+
+## A Maven ONLY Tutorial for an Eval Service
+
+![Thumbnail for Maven Tutorial](/tutorial_eval/img/tutorial_eval.png)
+{: .thumb200-l } 
+
+THIS IS IN BETA FOR NOW
+
+This tutorial mirrors the base tutorial but uses Maven instead of Bndtools. It
+takes you to the process of creating a small web application with an expression
+evaluator with nothing but mvn and vi. It shows how to do API based design,
+it creates 2 providers, a Gogo command, and a web app. It also shows how to
+do integration testing with maven.
+
+[Go to the Maven Eval Service Tutorial](/tutorial_eval/050-start.html)
+
+{: style='clear:both;' }
+
 ## IoT Tutorial
 
 ![Thumbnail for IoT Tutorial](/img/tutorial_iot/exploring-led-breadboard-1.png)

diff --git a/_config.yml b/_config.yml
@@ -13,6 +13,8 @@ collections:
     output: true
   book:
     output: true
+  qs:
+    output: true
   services:
     output: true    
   trains:
@@ -27,6 +29,8 @@ collections:
     output: true
   tutorial_wrap:
     output: true
+  tutorial_eval:
+    output: true
   tutorial_maven:
     output: true
 

diff --git a/_data/sidebar.yml b/_data/sidebar.yml
@@ -40,18 +40,18 @@ nav:
       - name: bnd manual
         url: "https://bnd.bndtools.org"
         external: true
-  - title: Knowledge
+  - title: enRoute classic
     links:
-      - name: App Notes
-        url: "/book/680-appnotes.html"
+      - name: About OSGi
+        url: "/book/210-doc.html"
       - name: Services
         url: "/book/400-services.html"
       - name: Tutorials
         url: "/book/150-tutorials.html"  
+      - name: App Notes
+        url: "/book/680-appnotes.html"
       - name: Examples
         url: "/book/180-examples.html"
-      - name: About OSGi
-        url: "/book/210-doc.html"
   - title: Development
     links:
       - name: On Github

diff --git a/_layouts/baselayout.html b/_layouts/baselayout.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en" ng-app="jpm">
+  {% include head.htm %}
+
+  <body>
+    {% include nav.htm %}
+
+    <div class="row main-container">
+
+      <!-- Main Content -->
+      <div class="large-9 medium-8 medium-push-4 large-push-3 columns">
+        <div class="off-canvas-wrap move" data-offcanvas>
+          <div class="inner-wrap">
+
+            <a role="button" href="#" class="show-for-small-only left-off-canvas-toggle menu-icon" style="background-color: darkgray;" ><span></span></a>
+
+            <!-- Off Canvas Menu -->
+            <aside id="#" class="left-off-canvas-menu" aria-hidden="true">
+                <!-- whatever you want goes here -->
+                {% include sidebar.htm %}
+            </aside>
+
+            <!-- main content goes here -->
+            {{content}}
+
+          <!-- close the off-canvas menu -->
+          <a class="exit-off-canvas"></a>
+
+          </div>
+        </div>
+
+
+
+      </div>
+
+      <!-- Sidebar -->
+      <div class="hide-for-small-only large-3 medium-4 medium-pull-8 large-pull-9 columns">
+        <div class="sidebar">
+          <nav>
+            {% include sidebar.htm %}
+          </nav>
+        </div>
+      </div>
+
+
+
+
+    </div>
+
+    {% include footer.htm %}
+  </body>
+</html>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,55 +1,9 @@
-<!DOCTYPE html>
-<html lang="en" ng-app="jpm">
-  {% include head.htm %}
+---
+layout: baselayout
+---
 
-  <body>
-    {% include nav.htm %}
+<!-- main content goes here -->
+{% if page.since %}<span class="secondary round label right" style="margin-bottom:5px;" title="The content below assumes bndtools version {{ page.since }}."><a href="https://github.com/bndtools/bnd/wiki/Changes-in-{{ page.since }}" target="_blank">Since {{ page.since }}</a></span></span>{% endif %}
+<h1>{{ page.title }}</h1>
 
-    <div class="row main-container">
-
-      <!-- Main Content -->
-      <div class="large-9 medium-8 medium-push-4 large-push-3 columns">
-        <div class="off-canvas-wrap move" data-offcanvas>
-          <div class="inner-wrap">
-
-            <a role="button" href="#" class="show-for-small-only left-off-canvas-toggle menu-icon" style="background-color: darkgray;" ><span></span></a>
-
-            <!-- Off Canvas Menu -->
-            <aside id="#" class="left-off-canvas-menu" aria-hidden="true">
-                <!-- whatever you want goes here -->
-                {% include sidebar.htm %}
-            </aside>
-
-            <!-- main content goes here -->
-            {% if page.since %}<span class="secondary round label right" style="margin-bottom:5px;" title="The content below assumes bndtools version {{ page.since }}."><a href="https://github.com/bndtools/bnd/wiki/Changes-in-{{ page.since }}" target="_blank">Since {{ page.since }}</a></span></span>{% endif %}
-            <h1>{{ page.title }}</h1>
-
-            {{content}}
-
-          <!-- close the off-canvas menu -->
-          <a class="exit-off-canvas"></a>
-
-          </div>
-        </div>
-
-
-
-      </div>
-
-      <!-- Sidebar -->
-      <div class="hide-for-small-only large-3 medium-4 medium-pull-8 large-pull-9 columns">
-        <div class="sidebar">
-          <nav>
-            {% include sidebar.htm %}
-          </nav>
-        </div>
-      </div>
-
-
-
-
-    </div>
-
-    {% include footer.htm %}
-  </body>
-</html>
+{{content}}
diff --git a/_layouts/prev-next-collection.html b/_layouts/prev-next-collection.html
@@ -1,38 +1,52 @@
 ---
-layout: default
+layout: baselayout
 ---
 
 {% assign prev = nil %}
 {% assign next = nil %}
+{% assign prevTitle = nil %}
+{% assign nextTitle = nil %}
 {% assign in_loop = false %}
 
-{% for service in site[page.collection] %}
+{% for entry in site[page.collection] %}
   {% if in_loop %}
-    {% assign next = service.url %}
+    {% assign next = entry.url %}
+    {% assign nextTitle = entry.title %}
     {% break %}
   {% endif %}
 
-  {% if service.url == page.url %}
+  {% if entry.url == page.url %}
     {% assign in_loop = true %}
     {% continue %}
   {% endif %}
 
   {% if forloop.last == false %}
-    {% assign prev = service.url %}
+    {% assign prev = entry.url %}
+    {% assign prevTitle = entry.title %}
   {% endif %}
 {% endfor %}
 
-{{ content }}
-<hr/>
 
-{% unless forloop.first %}
+
+{% capture navigation_links %}
   {% if prev %}
-    <a class="nav-prev" href="{{ prev }}">Prev</a>
+    <a class="nav-prev" href="{{ prev }}" title="{{prevTitle}}">Prev</a>
   {% endif %}
-{% endunless %}
 
-{% unless forloop.last %}
   {% if next %}
-    <a class="nav-next" href="{{ next }}">Next</a>
+    <a class="nav-next" href="{{ next }}" title="{{nextTitle}}">Next</a>
   {% endif %}
-{% endunless %}
+{% endcapture %}
+
+{{navigation_links}}
+<hr />
+
+{% if page.since %}<span class="secondary round label right" style="margin-bottom:5px;" title="The content below assumes bndtools version {{ page.since }}."><a href="https://github.com/bndtools/bnd/wiki/Changes-in-{{ page.since }}" target="_blank">Since {{ page.since }}</a></span></span>{% endif %}
+<h1>{{ page.title }}</h1>
+
+{{content}}
+<hr />
+
+{{navigation_links}}
+
+
diff --git a/_qs/050-start.md b/_qs/050-start.md
@@ -0,0 +1,50 @@
+---
+title: Quick Start Tutorial
+layout: prev-next-collection
+lprev: /book/150-tutorials.html
+lnext: /tutorial_base/050-start.html
+version: 2.0.0
+noindex: true
+---
+
+![Thumbnail for Quickstart Tutorial](/img/qs/app-0.png)
+{: .thumb200-l }
+
+In this quick start we develop a little project that, creates a single page web-application.
+
+This tutorial is light on the explanations because it focuses on introducing the overall architecture of enRoute, not the details. Over time this site will be filled with tutorials and documentation (or references to those) that will explain the minute details. This however, is about some big steps.
+
+We will cover the whole chain, from creating a workspace all the way to continuous integration.
+
+A disclaimer. This quick start is about learning to use OSGi enRoute, not about learning Java, Git, nor Eclipse. It is assumed that you have basic experience with these tools.
+
+If you have any questions about this quick-start, please discuss them in the [forum][forum].
+
+## Sections
+
+<div>
+<ol>
+
+{% for qs in site.qs %}{%unless qs.noindex%}<li><a href="{{qs.url}}">{{qs.title}}</a> – {{qs.summary}}</li>
+{%endunless%}{% endfor %}
+
+</ol>
+</div>
+
+
+## End
+
+So, you've finished this tutorial! What's next?
+
+Well, first, since we're still in beta, we'd love feedback. Our most favorite feedback is a pull request on the documentation. As an early user you must have run into some rough edges, outright stupidities, or you had a brilliant idea. Just go to the [OSGi enRoute][enroute-doc] repository on Github. Clone it in your own account, make your changes or additions, and send a pull request. We, and others like you, highly appreciate these kind of contributions.
+
+This tutorial is only a quick start, we've not explained a lot and just tried to get you on a starting level as soon as possible. To get more background, we highly recommend doing the [Base Tutorial](/tutorial_base/050-start.html). This tutorial follows the same route but shows how to design with service, the cornerstone of OSGi enRoute.
+
+You then might want to read the [Service Oriented Systems](/doc/215-sos.html) chapter how to build Service Oriented Systems.
+
+However, running into real problems is the best way to learn a technology. If you run into problems, use the [Forum][forum] to ask questions and get answers.
+
+And watch this space, we will expand this site with hundreds data sheets of services you can find on the net. These data-sheets will show you how to use this service in your application with real examples. 
+
+[forum]: /forum.html
+[enroute-doc]: https://github.com/osgi/osgi.enroute.site
diff --git a/_qs/100-prerequisites.md b/_qs/100-prerequisites.md
@@ -0,0 +1,10 @@
+---
+title: Prerequisites
+layout: prev-next-collection
+lprev: 050-start.html
+lnext: 200-workspace.html
+summary: The prerequisites for the use of OSGi enRoute (Important!)
+---
+
+{% include prerequisites.md %}
+
diff --git a/_qs/200-workspace.md b/_qs/200-workspace.md
@@ -0,0 +1,24 @@
+---
+title: The Workspace
+layout: prev-next-collection
+lprev: 100-prerequisites.html
+lnext: 300-application.html
+summary: Setup a bnd workspace
+---
+
+## What you will learn in this section
+We will setup a bnd(tools) workspace for OSGi enRoute so we can build an application in the next section.
+
+Before you start this section, make sure you've checked the [prerequisites](100-prerequisites.html) for OSGi enRoute on your platform. 
+
+{% include workspace.md %}
+
+### File System
+
+Since we made changes to your file system, a short summary of where we placed what.
+
+The Eclipse workspace was placed in a special place for Eclipse workspaces, the `~/eclipse` directory. We named this workspace `com.acme.prime`, which is a good name. The bnd workspace was placed also in your home directory, in the `~/git` directory, also under the name `com.acme.prime`; using the same name for both the Eclipse and bnd workspaces is a good practice.
+
+## Next
+
+In the next section of this quick start tutorial we will create a sample application.