Skip to content

Commit

Permalink
WIP: Add dynamic installation page (AdoptOpenJDK#166)
Browse files Browse the repository at this point in the history 
* Fix white bar at bottom of Nightly page

* Add dynamic installation page

* eslint fixes

* Add copy to clipboard buttons

* Fix highlighting issue
  • Loading branch information
@karianna
Joe Brady authored and karianna committed Jul 10, 2017
1 parent e140e19 commit d20637f
Show file tree
Hide file tree
Showing 9 changed files with 325 additions and 118 deletions.
8 changes: 5 additions & 3 deletions .eslintrc.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,6 @@ globals:
detectOS: true
loadJSON: true
errorContainer: true
onIndexLoad: true
onNightlyLoad: true
onReleasesLoad: true
getSearchableName: true
getOfficialName: true
getBinaryExt: true
Expand All @@ -29,5 +26,10 @@ globals:
setTickLink: true
loadPlatformsThenData: true
variant: true
platformSelector: true
hljs: true
getInstallCommand: true
getChecksumCommand: true
getPathCommand: true

extends: eslint:recommended
125 changes: 46 additions & 79 deletions src/handlebars/installation.handlebars
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1,57 @@
{{> header title='Installation | ' style1='<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/railscasts.min.css">' style2='<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>' }}
{{> header title='Installation | ' style1='<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/obsidian.min.css">' }}

<main class="grey-bg">

<h1 class="margin-bottom large-title">Installation</h1>
<h1 class="large-title">Installation</h1>

<!--<h3>Jump to:</h3>
<h3 class="zero-margin inline-block"><a class="grey-button no-underline" href="#linux-mac">Linux and macOS</a></h3>
<h3 class="zero-margin inline-block"><a class="grey-button no-underline" href="#windows">Windows</a></h3>-->
<div id="loading"><img src="dist/assets/loading_dots.gif" width="40" height="40"></div>
<div id="error-container"></div>

<div class="info-page-container">
<div class="margin-bottom">
<h2 id="linux-mac" class="bold">Linux, AIX and macOS installation</h2>
<ol>
<li>Download the latest <code>tar.gz</code> from the <a href="./releases.html">Latest build</a> page to a directory that will not move or be deleted.</li>
<li>
Using Terminal, navigate to the location of this <code>tar.gz</code>:
<pre><code>cd &lt;path/to/your/directory&gt;</code></pre>
</li>
<li>
Optional: use the <a href="#sha256">checksum instructions</a> below to ensure the authenticity of your binary.
</li>
<li>
Extract the <code>tar.gz</code>. You can use the following command:
<pre><code>tar -xf &lt;filename&gt;.tar.gz</code></pre>
Note: for <strong>AIX</strong>, use the following command:
<pre><code>gunzip -c &lt;filename&gt;.tar.gz | tar xf -</code></pre>
</li>
<li>
Add this version of Java to your PATH:
<pre><code>export PATH=$PWD/j2sdk-image/bin:$PATH</code></pre>
</li>
<li>
Check that Java has installed correctly:
<pre><code>java -version</code></pre>
</li>
</ol>
<div id="installation-container" class="info-page-container hide">
<div class="align-center">
<select id="variant-selector"></select>
<h2 class="inline-block">Platform: </h2><select id="platform-selector" style="margin-left:1rem;"></select>
</div>

<div class="margin-bottom">
<h2 id="windows" class="bold">Windows installation</h2>
<ol>
<li>Download the latest <code>.zip</code> from the <a href="./releases.html">Latest build</a> page to a directory that will not move or be deleted.</li>
<li>
Using the command prompt, navigate to the location of this <code>.zip</code>:
<pre><code>cd &lt;path\to\your\directory&gt;</code></pre>
</li>
<li>
Optional: use the <a href="#sha256">checksum instructions</a> below to ensure the authenticity of your binary.
</li>
<li>
Extract the <code>.zip</code>. You can use the following command:
<pre><code>unzip &lt;filename&gt;.zip</code></pre>
</li>
<li>
Add this version of Java to your PATH:
<pre><code>set PATH=%cd%\j2sdk-image\bin;%PATH%</code></pre>
</li>
<li>
Check that Java has installed correctly:
<pre><code>java -version</code></pre>
</li>
</ol>
</div>

<div>
<h2 id="sha256" class="bold">Checking the SHA-256 checksum</h2>
<p>Optionally, you can compare the SHA-256 checksum of your downloaded binary against the checksums that are provided for every release and nightly build.</p>
<p>Follow the instructions for your platform to generate a SHA-256 checksum of your downloaded binary, then open the corresponding <code>.txt</code> checksum file and ensure that it contains the same number.</p>
<ul>
<li>
<span>Linux: </span>
<pre><code>sha256sum path/to/file.tar.gz</code></pre>
</li>
<li>
<span>macOS & AIX: </span>
<pre><code>shasum -a 256 path/to/file.tar.gz</code></pre>
</li>
<li>
<span>Windows: </span>
<pre><code>certutil -hashfile path/to/file.zip SHA256</code></pre>
</li>
</ul>
<div id="installation-template">
<script id="template" type="text/x-handlebars-template">
\{{#each htmlTemplate}}
<div id="installation-container-\{{thisPlatform}}" class="installation-single-platform hide">
<div class="margin-bottom">
<h2 class="bold"><var platform>\{{thisOfficialName}}</var> installation</h2>
<ol>
<li>
Make sure you have downloaded the latest <strong><a href="\{{thisBinaryLink}}"><var platform>\{{thisOfficialName}}</var> binary</a></strong> to a directory that will not move or be deleted, and use Terminal/Command Prompt to <code>cd</code> into it.
</li>
<li>
Optional: use the checksum instructions below to ensure the authenticity of your binary.
</li>
<li>
Extract the <code><var extension>\{{thisBinaryExtension}}</var></code>. You can use the following command:
<pre><code><var id="unzip-\{{thisPlatform}}" unzipCommand>\{{thisUnzipCommand}}</var></code><span onclick="copyClipboard('#unzip-\{{thisPlatform}}')" class="copy-code-button">Copy</span></pre>
</li>
<li>
Add this version of Java to your PATH:
<pre><code><var id="path-\{{thisPlatform}}" pathCommand>\{{thisPathCommand}}</var></code><span onclick="copyClipboard('#path-\{{thisPlatform}}')" class="copy-code-button">Copy</span></pre>
</li>
<li>
Check that Java has installed correctly:
<pre><code id="java-\{{thisPlatform}}">java -version</code><span onclick="copyClipboard('#java-\{{thisPlatform}}')" class="copy-code-button">Copy</span></pre>
</li>
</ol>
</div>
<div>
<h2 class="bold">Checking the SHA-256 checksum</h2>
<p>Optionally, you can compare the SHA-256 checksum of your downloaded binary against the checksums that are provided for every release and nightly build.</p>
<p>Use this command to generate a SHA-256 checksum of your downloaded binary, then open the corresponding <a href="\{{thisChecksumLink}}">checksum file</a> and ensure that it contains the same number.</p>
<pre><code><var id="checksum-\{{thisPlatform}}" checksumCommand>\{{thisChecksumCommand}}</var></code><span onclick="copyClipboard('#checksum-\{{thisPlatform}}')" class="copy-code-button">Copy</span></pre>
</div>
</div>
\{{/each}}
</script>
</div>

</div>

</main>

{{> footer script='<script>hljs.initHighlightingOnLoad();</script>'}}
{{> footer script='<script src="https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.4/platform.min.js"></script>' script2='<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>' script3='<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>' script4='<script>onInstallationLoad();</script>' }}
71 changes: 49 additions & 22 deletions src/js/0-global.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ var lookup = {};
var i = 0;
var variant = getQueryByName('variant');
var variantSelector = document.getElementById('variant-selector');
var platformSelector = document.getElementById('platform-selector');

function setLookup() {
// FUNCTIONS FOR GETTING PLATFORM DATA
Expand Down Expand Up @@ -73,6 +74,21 @@ function getLogo(searchableName) {
return (logoPath + (lookup[searchableName].logo));
}

// gets the INSTALLATION COMMAND when you pass in 'searchableName'
function getInstallCommand(searchableName) {
return (lookup[searchableName].installCommand);
}

// gets the CHECKSUM COMMAND when you pass in 'searchableName'
function getChecksumCommand(searchableName) {
return (lookup[searchableName].checksumCommand);
}

// gets the PATH COMMAND when you pass in 'searchableName'
function getPathCommand(searchableName) {
return (lookup[searchableName].pathCommand);
}

// set value for loading dots on every page
var loading = document.getElementById('loading');

Expand Down Expand Up @@ -215,31 +231,42 @@ function persistUrlQuery() {
}

function setVariantSelector() {
if(variantSelector.options.length === 0) {
variants.forEach(function(eachVariant) {
var op = new Option();
op.value = eachVariant.searchableName;
op.text = eachVariant.officialName;
variantSelector.options.add(op);
});
}
if(variantSelector) {
if(variantSelector.options.length === 0) {
variants.forEach(function(eachVariant) {
var op = new Option();
op.value = eachVariant.searchableName;
op.text = eachVariant.officialName;
variantSelector.options.add(op);
});
}

if(!variant) {
variant = variants[0].searchableName;
}
if(!variant) {
variant = variants[0].searchableName;
}

variantSelector.value = variant;
variantSelector.value = variant;

if(variantSelector.value === '') {
var op = new Option();
op.value = 'unknown';
op.text = 'Select a variant';
variantSelector.options.add(op);
variantSelector.value = 'unknown';
errorContainer.innerHTML = '<p>Error: no such variant. Please select a valid variant from the drop-down list.</p>';
if(variantSelector.value === '') {
var op = new Option();
op.value = 'unknown';
op.text = 'Select a variant';
variantSelector.options.add(op);
variantSelector.value = 'unknown';
errorContainer.innerHTML = '<p>Error: no such variant. Please select a valid variant from the drop-down list.</p>';
}

variantSelector.onchange = function() {
setUrlQuery('variant', variantSelector.value);
};
}
}

variantSelector.onchange = function() {
setUrlQuery('variant', variantSelector.value);
};
function copyClipboard(element) {
var $temp = $('<input>');
$('body').append($temp);
$temp.val($(element).text()).select();
document.execCommand('copy');
$temp.remove();
alert('Copied to clipboard');
}
Loading

0 comments on commit d20637f

Please sign in to comment.