Visual redesign: new hero/nav/footer, PicoCSS styling, refreshed copy

404.html

@@ -2,7 +2,8 @@
 layout: main
 title: Page Not Found
 ---
-
-<p>The page you tried to access does not exist on this server. Please let us know what page you linked from and the URL&nbsp;that failed.</p>
+<h1>Page Not Found</h1>
 
-<p style="text-align: center;"><img src="/images/Thinking.jpg" alt="Hmm..." /></p>
+<p>We couldn't find the page you were looking for.</p>
+
+<p>If a link brought you here, please <a href="https://github.com/jruby/jruby.github.io/issues">report it on our issue tracker</a>.</p>

README.markdown

@@ -24,6 +24,9 @@ The site is generated with Jekyll, and while you can use the regular
    It also emulates Jekyll's `--auto` mode so that files are refreshed
    as you save changes to them.
 
+   To test link previews through a tunnel such as ngrok, set its hostname:
+   `PREVIEW_DOMAIN=example.ngrok-free.app rake server`
+
 # Contributing
 
 If you wish to contribute content updates for jruby.org, please fork,

Rakefile

@@ -26,6 +26,27 @@ task :deploy => [:generate] do
   sh "tar -C _site/ -zcf - . | ssh deploy@jruby.org 'cd /data/jruby.org && tar zxf -'"
 end
 
+namespace :deploy do
+  desc 'Deploy the site to the Spindle staging site (needs SPINDLE_API_KEY and SPINDLE_SLUG)'
+  task :staging do
+    api_key = ENV['SPINDLE_API_KEY'] || fail('No SPINDLE_API_KEY env set')
+    slug = ENV['SPINDLE_SLUG'] || fail('No SPINDLE_SLUG env set')
+    api_url = ENV.fetch('SPINDLE_API_URL', 'https://stats.fascinationworks.com')
+
+    ruby '-S bundle exec jekyll build'
+
+    require 'tmpdir'
+    Dir.mktmpdir do |dir|
+      archive = File.join(dir, 'dist.tar.gz')
+      sh 'tar', '-czf', archive, '-C', '_site', '.'
+      sh 'curl', '-fsS', '-H', "Authorization: Bearer #{api_key}", '-F', "archive=@#{archive}",
+         "#{api_url}/api/v1/sites/#{slug}/deployments", verbose: false do |ok, status|
+        ok or fail "Spindle deploy failed (curl exit #{status.exitstatus})"
+      end
+    end
+  end
+end
+
 desc 'Deploy jruby.org config changes'
 task :cookbooks do
   Bundler.with_clean_env do

_config.yml

@@ -24,5 +24,25 @@ urls:
   wiki: https://github.com/jruby/jruby/wiki
   lists: https://github.com/jruby/jruby/wiki/MailingLists
   github: https://github.com/jruby/jruby
+  matrix: "https://matrix.to/#/#jruby:matrix.org"
 team_email: team@jruby.org
 domain: www.jruby.org
+tagline: The Ruby Programming Language on the JVM
+description: JRuby is a high performance, stable, fully threaded Java implementation of the Ruby programming language.
+
+# Drives download.html. rake's change_versions_in rewrites the versions here on
+# release; dates and release-notes links come from the matching post. Sizes are
+# approximate and are not updated automatically.
+releases:
+  - version: "10.1.3.0"
+    ruby_version: "4.0"
+    description: "Our latest point release of Ruby 4.0 support."
+    sizes: { tar: "~46MB", zip: "~51MB", exe64: "~107MB", exe: "~106MB", src: "~13MB", jar: "~46MB" }
+  - version: "10.0.8.0"
+    ruby_version: "3.4"
+    description: "Stable Ruby 3.4 support release."
+    sizes: { tar: "~36MB", zip: "~42MB", exe64: "~86MB", exe: "~86MB", src: "~15MB", jar: "~36MB" }
+  - version: "9.4.15.0"
+    ruby_version: "3.1"
+    description: "Latest Ruby 3.1 maintenance release."
+    sizes: { tar: "~31MB", zip: "~32MB", exe64: "~64MB", exe: "~64MB", src: "~13MB", jar: "~33MB" }

_includes/download_row.html

@@ -0,0 +1,5 @@
+<tr>
+  <td><a href="{{ include.url }}">{{ include.label }}</a></td>
+  <td>{{ include.size }}</td>
+  <td>{% if include.sha256 %}<a href="{{ include.url }}.sha256" class="checksum-link">SHA256</a>{% endif %}</td>
+</tr>

_includes/footer.html

@@ -0,0 +1,43 @@
+<footer class="site-footer">
+  <div class="footer-grid">
+    <div>
+      <p class="footer-col-heading">JRuby</p>
+      <ul>
+        <li><a href="/download">Download {{ site.release.version }}</a></li>
+        <li><a href="/getting-started">Getting Started</a></li>
+        <li><a href="/documentation">Documentation</a></li>
+        <li><a href="/security">Security</a></li>
+        <li><a href="/nightly">Nightly Builds</a></li>
+      </ul>
+    </div>
+    <div>
+      <p class="footer-col-heading">Community</p>
+      <ul>
+        <li><a href="/community">Get Involved</a></li>
+        <li><a href="/contribute">Contribute</a></li>
+        <li><a href="/blogs">Blogs</a></li>
+        <li><a href="/chat">Chat</a></li>
+        <li><a href="{{ site.urls.wiki }}" target="_blank" rel="noopener">Wiki</a></li>
+      </ul>
+    </div>
+    <div>
+      <p class="footer-col-heading">Development</p>
+      <ul>
+        <li><a href="{{ site.urls.github }}" target="_blank" rel="noopener">Source Code</a></li>
+        <li><a href="{{ site.urls.bugs }}" target="_blank" rel="noopener">Issue Tracker</a></li>
+        <li><a href="/news">Release News</a></li>
+        <li><a href="/atom.xml">Atom Feed</a></li>
+      </ul>
+    </div>
+    <div>
+      <p class="footer-col-heading">Professional Support</p>
+      <p>Need expert JRuby support?</p>
+      <a href="https://headius.com/services/?utm_source=jruby.org&amp;utm_medium=referral&amp;utm_campaign=enterprise_support&amp;utm_content=footer_link" class="headius-footer-link" target="_blank" rel="noopener">
+        Headius Enterprises &rarr;
+      </a>
+    </div>
+  </div>
+  <div class="footer-bottom">
+    <p>JRuby is open source software released under a tri <a href="https://github.com/jruby/jruby/blob/master/COPYING">EPL 2.0 / GPL 2 / LGPL 2.1</a> license.</p>
+  </div>
+</footer>

_includes/head.html

@@ -1,5 +1,54 @@
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-  <title>{{ page.title }} &mdash; JRuby.org</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  {%- assign page_title = page.title -%}
+  {%- assign page_description = page.description -%}
+  {%- if page.url contains "/files/downloads/" -%}
+    {%- if page.title == "Files/downloads" -%}
+      {%- assign page_title = "All JRuby Releases" -%}
+      {%- assign page_description = "Download files and checksums for every JRuby release." -%}
+    {%- else -%}
+      {%- assign release_name = page.title | replace: "Files/downloads/", "JRuby " -%}
+      {%- assign page_title = release_name | append: " Downloads" -%}
+      {%- assign page_description = "Download files and checksums for " | append: release_name | append: "." -%}
+    {%- endif -%}
+  {%- endif -%}
+  {%- assign share_title = page_title -%}
+  {%- if page.layout == "home" -%}{%- assign share_title = "JRuby: " | append: site.tagline -%}{%- endif -%}
+  {%- unless share_title contains "JRuby" -%}{%- assign share_title = share_title | append: " | JRuby" -%}{%- endunless -%}
+  {%- assign share_description = page_description | default: page.excerpt | default: site.description | strip_html | strip_newlines | strip | truncate: 200 | escape -%}
+  {%- assign share_url = "https://" | append: site.domain | append: page.url | replace: "index.html", "" | replace: ".html", "" %}
+  {%- if page.layout == "home" %}
+  <title>{{ share_title | escape }}</title>
+  {%- else %}
+  <title>{{ page_title | escape }} &mdash; JRuby.org</title>
+  {%- endif %}
+  <meta name="description" content="{{ share_description }}">
+  {%- unless page.url == "/404.html" %}
+  <link rel="canonical" href="{{ share_url }}">
+  {%- endunless %}
+  <meta property="og:site_name" content="JRuby">
+  <meta property="og:locale" content="en_US">
+  <meta property="og:title" content="{{ share_title | escape }}">
+  <meta property="og:description" content="{{ share_description }}">
+  <meta property="og:url" content="{{ share_url }}">
+  <meta property="og:image" content="https://{{ site.domain }}/images/og-image.png">
+  <meta property="og:image:type" content="image/png">
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="630">
+  <meta property="og:image:alt" content="The JRuby logo with the tagline: {{ site.tagline }}">
+  {%- if page.layout == "post" %}
+  <meta property="og:type" content="article">
+  <meta property="article:published_time" content="{{ page.date | date_to_xmlschema }}">
+  {%- else %}
+  <meta property="og:type" content="website">
+  {%- endif %}
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:site" content="@jruby">
+  {%- if page.layout == "home" %}
+  <script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareApplication","name":"JRuby","url":"https://{{ site.domain }}/","description":{{ site.description | jsonify }},"applicationCategory":"DeveloperApplication","operatingSystem":"Any platform with a Java Virtual Machine","softwareVersion":{{ site.release.version | jsonify }},"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}</script>
+  {%- elsif page.layout == "post" %}
+  <script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","headline":{{ page.title | jsonify }},"description":{{ share_description | jsonify }},"datePublished":{{ page.date | date_to_xmlschema | jsonify }},"url":{{ share_url | jsonify }},"image":"https://{{ site.domain }}/images/og-image.png","author":{"@type":"Organization","name":"The JRuby Team"},"publisher":{"@type":"Organization","name":"JRuby","url":"https://{{ site.domain }}/"}}</script>
+  {%- endif %}
   <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
@@ -8,11 +57,7 @@
   <link rel="shortcut icon" href="/favicon.ico">
   <meta name="msapplication-TileColor" content="#2d89ef">
   <meta name="msapplication-config" content="/browserconfig.xml">
-  <meta name="theme-color" content="#ffffff">
+  <meta name="theme-color" content="#1a1a2e">
   <link rel="alternate" href="/atom.xml" title="JRuby.org News" type="application/atom+xml"/>
-  <link rel="stylesheet" href="/stylesheets/main.css?version=1" type="text/css" media="screen" title="no title" charset="utf-8" />
-  <!--[if lte IE 7]><link rel="stylesheet" href="/stylesheets/ie7-hacks.css" type="text/css" media="screen" title="no title" charset="utf-8" /><![endif]-->
-  <link rel="stylesheet" href="/stylesheets/syntax.css" type="text/css" media="screen" title="no title" charset="utf-8" />
-
-  <script type="text/javascript" src="//use.typekit.com/swo8tlm.js"></script>
-  <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+  <link rel="stylesheet" href="/stylesheets/pico.classless.min.css" type="text/css" media="screen">
+  <link rel="stylesheet" href="/stylesheets/style.css?version={{ site.time | date: '%s' }}" type="text/css" media="screen">

_includes/menu.html

@@ -1,35 +1,24 @@
-<div id="main_nav">
-  <div class="wrapper">
-    <div id="menu" class="menu">
-      <ul>
-        <li id="page_1" class="{% if page.title contains "Home" %}on{% endif %}">
-          <a href="/">Home</a>
-        </li>
-        <li id="page_5" class="{% if page.title contains "News" %}on{% endif %}">
-          <a href="/news">News</a>
-        </li>
-        <li id="page_16" class="{% if page.title contains "Blog" %}on{% endif %}">
-        <a href="https://blog.jruby.org/">Blog</a>
-        </li>
-        <li id="page_8" class="{% if page.title contains "Download" %}on{% endif %}">
-          <a href="/download">Downloads</a>
-        </li>
-        <li id="page_10" class="{% if page.title contains "Getting Started" %}on{% endif %}">
-          <a href="/getting-started">Getting Started</a>
-        </li>
-        <li id="page_14" class="{% if page.title contains "Chat" %}on{% endif %}">
-          <a href="/chat">Chat</a>
-        </li>
-        <li id="page_9" class="{% if page.title contains "Community" %}on{% endif %}">
-          <a href="/community">Community</a>
-        </li>
-        <li id="page_13" class="{% if page.title contains "Documentation" %}on{% endif %}">
-          <a href="/documentation">Documentation</a>
-        </li>
-        <li id="page_15" class="{% if page.title contains "Security" %}on{% endif %}">
-          <a href="/security">Security</a>
-        </li>
-      </ul>
+<a class="skip-link" href="#main-content">Skip to content</a>
+<header class="site-header">
+  <nav class="site-nav" aria-label="Main">
+    <input type="checkbox" id="nav-toggle" class="nav-toggle" aria-label="Toggle navigation menu">
+    <div class="nav-brand">
+      <label for="nav-toggle" class="nav-hamburger" aria-hidden="true">
+        <span></span><span></span><span></span>
+      </label>
+      <a href="/" class="brand-link">
+        <img src="/images/jruby-logo-white.png" alt="JRuby home" class="nav-logo" width="1200" height="356">
+      </a>
     </div>
-  </div>
-</div>
+    <ul class="nav-links">
+      <li><a href="/download">Download</a></li>
+      <li><a href="/getting-started">Get Started</a></li>
+      <li><a href="/documentation">Documentation</a></li>
+      <li><a href="/chat">Chat</a></li>
+      <li><a href="/community">Community</a></li>
+      <li><a href="/security">Security</a></li>
+      <li><a href="/news">News</a></li>
+      <li><a href="https://blog.jruby.org/">Blog</a></li>
+    </ul>
+  </nav>
+</header>

_includes/scrollable.html

@@ -0,0 +1,13 @@
+<script>
+  // Scrolling code blocks and tables need a tab stop so keyboard users can scroll them.
+  (function () {
+    function update() {
+      document.querySelectorAll("#main-content pre, #main-content table").forEach(function (el) {
+        if (el.scrollWidth > el.clientWidth) el.tabIndex = 0;
+        else el.removeAttribute("tabindex");
+      });
+    }
+    update();
+    addEventListener("resize", update);
+  })();
+</script>

_layouts/default.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  {% include head.html %}
+</head>
+<body>
+  {% include menu.html %}
+  <main id="main-content" tabindex="-1">
+    {{ content }}
+  </main>
+  {% include footer.html %}
+  {% include scrollable.html %}
+  {% include tracking.html %}
+</body>
+</html>