Improve browsing of release notes and try.squeak.org integration

_config.yml

@@ -71,7 +71,7 @@ defaults:
       type: "release_notes"
     values:
       cols: 12
-      layout: default
+      layout: release_note
 
 # Enable SASS support
 sass:

_includes/item_text_only.html

@@ -2,8 +2,7 @@
   <div class="col-md-12 col-lg-12">
     {% assign isOverviewPage = page.section_overview_page and item.collection == page.section_label %}
     {% if item.title %}
-    <span class="anchor" id="{{ item.title | slugify }}{% if item.order %}-{{ item.order }}{% endif %}"></span>
-    <h3 class="text-center-sm">
+    <h3 class="text-center-sm" id="{{ item.title | slugify }}">
       {% if isOverviewPage %}
       <a href="{{ item.url }}">
       {% elsif item.href %}
@@ -16,7 +15,7 @@ <h3 class="text-center-sm">
     </h3>
     {% endif %}
     {% if isOverviewPage %}
-    {{ item.content | strip_html | normalize_whitespace | truncatewords: 80, '…' }} <a href="{{ item.url }}">[Read on…]</a>
+    {{ item.content | strip_html | normalize_whitespace | truncatewords: 80, '…' }} <a href="{{ item.url }}">[Read on]</a>
     {% else %}
     {{ item.content }}
     {% endif %}

_includes/item_with_img.html

@@ -16,8 +16,7 @@
   </div>
   <div class="col-md-8 col-lg-8">
     {% if item.title %}
-    <span class="anchor" id="{{ item.title | slugify }}{% if item.order %}-{{ item.order }}{% endif %}"></span>
-    <h3 class="text-center-sm">
+    <h3 class="text-center-sm" id="{{ item.title | slugify }}">
       {% if item.href %}
       <a href="{{ item.href }}"{% if item.href-external %} target="_blank"{% endif %}>
       {% endif %}

_layouts/release_note.html

@@ -0,0 +1,9 @@
+---
+layout: default
+---
+
+<div class="well text-center release-note-head">
+  {% include_relative _note_head.html %}
+</div>
+
+{{ content }}

_layouts/section.html

@@ -37,8 +37,7 @@ <h1 class="section-heading"><span>{{ page.section.title }}</span></h1>
 
         {% for row in groups %}
           {% if row.name != "" %}
-        <span class="anchor" id="{{ row.name | slugify }}"></span>
-        <h2>{{ row.name }}</h2>
+        <h2 id="{{ row.name | slugify }}">{{ row.name }}</h2>
           {% endif %}
           {% include row.html items=row.items %}
         {% endfor %}

_plugins/code_links_rewriter.rb

@@ -13,14 +13,33 @@
     after = $3
 
     version = doc.data['title'].to_s[/\d+\.\d+/]
-    # clamp down to 6.0, the first version that supports --doit, and hope that older URLs do still work here
-    version = '6.0' if version.nil? || Gem::Version.new(version) < Gem::Version.new('6.0')
 
     argv = [
-      "squeakjs", # vm name
-      "squeak.image", # image name (dummy)
+      # vm name
+      "squeakjs",
+      # image name (dummy)
+      "squeak.image",
+      # first argument: DoItFirst is supported since Squeak 6.0; for older versions, the images on try.squeak.org offer a shim (a `--doit` file next to the image file)
       "--doit",
-      "(TextURL url: '#{url.gsub("'", "''")}') future actOnClickFor: nil",
+      # second argument: Code snippet to run.
+      if Gem::Version.new(version) >= Gem::Version.new('5.2')
+        # TextURL class>>#url: is only supported since Squeak 6.0.
+        "(TextURL new url: '#{url.gsub("'", "''")}') future actOnClickFor: nil"
+      else
+        # code:// URLs were only introduced in Squeak 5.1, but the release notes for 4.5-5.0 have been later patched to use them anyway:
+        # https://github.com/squeak-smalltalk/squeak-app/commit/b3e7b89f41a51eb133b2c7e613ee78143c50c810
+        # As a shim, the rough behavior of TextURL>>#url: is hardcoded here.
+        expression = url[7..]
+        browseExpression = case expression
+          when /^\s*(\p{Lu}\w*(?:\s+class)?)\s*$/ then "#{$1} browse"
+          when /^\s*(\p{Lu}\w*(?:\s+class)?)\s*>>\s*(#\w[\w:]+)\s*$/ then "ToolSet browse: #{$1} selector: #{$2}"
+          when /^\s*(#\w[\w:]+)\s*$/ then "SystemNavigation default browseAllImplementorsOf: #{$1}.
+SystemNavigation default browseAllCallsOn: #{$1}."
+          else "Compiler evaluate: '#{expression.gsub("'", "''")}'"  # Strictly speaking, we should check here whether the result needs to be browsed, but no real URL in the affected release notes uses that.
+        end
+
+        "[#{browseExpression}] future value"
+      end
     ]
 
     new_url = URI::HTTPS.build(
@@ -29,12 +48,18 @@
       # todo for later: support highres on try.squeak.org
       # todo it would also be nice if we could open the image in the demo mode (including the remarks on SqueakJS vs OSVM)
       query: URI.encode_www_form({
-        zip: "images/Squeak#{version}.zip",
+        url: "images",
+        zip: "Squeak#{version}.zip",
         wizard: 'false',
-        argv: argv.to_json,
+        demo: 'true',
+        **(if Gem::Version.new(version) >= Gem::Version.new('5.1')
+          { navigateToReleaseNotes: 'true' }
+        else {} end),
+        argv: argv.to_json
       }).gsub('+', '%20')
     ).to_s
+    new_url.sub!('?', '#')  # unconventional SqueakJS convention (so follow-up links on the demo page replace former parameters, I suppose)
 
-    %Q(<a #{before}href="#{CGI.escapeHTML(new_url)}" title="#{CGI.escapeHTML(url)}"#{after}>)
+    %Q(<a target="_blank" #{before}href="#{CGI.escapeHTML(new_url)}" title="#{CGI.escapeHTML(url)}"#{after}>)
   end
 end

_release_notes/_note_head.html

@@ -0,0 +1,26 @@
+{% assign version = page.path | split: "/" | last | remove: ".md" %}
+{% assign major_version = version | split: "." | first %}
+{% assign releases = site[page.collection] | sort: "order" %}
+{% assign latest_release = releases | last %}
+
+<p>
+  These release notes are optimized for viewing inside Squeak, as they contain a lot of interactive examples.
+  On this page, interactive links open in SqueakJS, which is a browser-based Smalltalk VM with some limitations.
+  For the best experience, download Squeak and read the release notes there.
+</p>
+
+<div class="note-head__actions">
+  {% if page.url == latest_release.url %}
+    <a href="/downloads/" class="btn btn-primary" target="_blank">
+      Download Squeak
+    </a>
+  {% else %}
+    <a href="/downloads/#squeak-v{{ major_version }}" class="btn btn-primary" target="_blank">
+      Download Squeak {{ version }}
+    </a>
+  {% endif %}
+
+  <a href="https://try.squeak.org/#url=images&zip=Squeak{{ version }}.zip&demo{% if page.order >= 510 %}&navigateToReleaseNotes{% endif %}" class="btn btn-default" target="_blank">
+    Try it in browser (SqueakJS)
+  </a>
+</div>

_sass/custom.scss

@@ -3,8 +3,9 @@ html {
     min-height: 100%;
 }
 
+$navbar-height: 70px;
 body {
-    padding-top: 70px;
+    padding-top: $navbar-height;
     margin-bottom: 60px; /* footer height */
 }
 
@@ -32,11 +33,8 @@ img[src*=".svg"] { /* Fix SVGs in IE */
     line-height: 1.5;
 }
 
-.anchor {
-    display: block;
-    height: 60px; // fixed navigation height + 10px
-    margin-top: -60px;
-    visibility: hidden;
+[id] {
+    scroll-margin-top: $navbar-height;
 }
 
 
@@ -120,6 +118,17 @@ img[src*=".svg"] { /* Fix SVGs in IE */
     background-color: $brand-primary;
 }
 
+.release-note-head {
+    max-width: 900px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 5px;
+}
+
+.note-head__actions .btn + .btn {
+  margin-left: 5px;
+}
+
 
 /* Bibliography */
 ol.bibliography {