Merge pull request #201 from AMoo-Miki/versioned-1.0
Add versioned documentation
This commit is contained in:
commit
bcf443f976
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"current": "1.0"
|
||||
}
|
|
@ -6,3 +6,9 @@
|
|||
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
|
||||
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js"></script>
|
||||
{% endif %}
|
||||
|
||||
{% if jekyll.environment == "development" %}
|
||||
<script src="{{ '/assets/js/version-selector.js' | relative_url }}"></script>
|
||||
{% else %}
|
||||
<script src="{{ '/docs/latest/assets/js/version-selector.js' }}"></script>
|
||||
{% endif %}
|
||||
|
|
|
@ -57,6 +57,10 @@ layout: table_wrappers
|
|||
</a>
|
||||
</div>
|
||||
<nav role="navigation" aria-label="Main" id="site-nav" class="site-nav">
|
||||
{% assign past_versions = site.data.versions.past | join: ";" %}
|
||||
<div class="version-wrapper">
|
||||
<version-selector selected="{{ site.data.versions.current }}"></version-selector>
|
||||
</div>
|
||||
{% assign pages_top_size = site.html_pages
|
||||
| where_exp:"item", "item.title != nil"
|
||||
| where_exp:"item", "item.parent == nil"
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
$content-width: 900px;
|
||||
|
||||
//
|
||||
// Brand colors
|
||||
//
|
||||
|
|
|
@ -60,7 +60,7 @@ code {
|
|||
}
|
||||
|
||||
.site-nav {
|
||||
padding-top: 2rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.nav-category {
|
||||
|
@ -389,7 +389,7 @@ html {
|
|||
|
||||
body {
|
||||
@include serif;
|
||||
@include font-size(18);
|
||||
@include font-size(16);
|
||||
background: $background-lightest;
|
||||
color: $text;
|
||||
line-height: 1.6;
|
||||
|
@ -962,6 +962,7 @@ main {
|
|||
line-height: 1.3;
|
||||
padding: 1px 0 6px;
|
||||
margin: .45em 0 .35em;
|
||||
letter-spacing: -1px;
|
||||
|
||||
@include mq(md) {
|
||||
@include font-size(32, true);
|
||||
|
@ -975,6 +976,7 @@ main {
|
|||
a {
|
||||
font-weight: 300;
|
||||
background: none;
|
||||
color: $text-link-alternate;
|
||||
|
||||
&:hover, :active {
|
||||
background: none;
|
||||
|
@ -1102,3 +1104,17 @@ main {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.version-wrapper {
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
version-selector {
|
||||
z-index: 1;
|
||||
font-size: .9rem;
|
||||
|
||||
--normal-bg: linear-gradient(#{lighten($blue-300, 5%)}, #{darken($blue-300, 2%)});
|
||||
--hover-bg: linear-gradient(#{lighten($blue-300, 2%)}, #{darken($blue-300, 4%)});
|
||||
--link-color: #{$blue-300};
|
||||
}
|
||||
|
|
|
@ -0,0 +1,176 @@
|
|||
const PREFIX = "OpenSearch ";
|
||||
const tpl = `
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
font-size: 1em;
|
||||
user-select: none;
|
||||
margin: 3px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#root {
|
||||
text-decoration: none;
|
||||
color: #FFFFFF;
|
||||
background-color: #00509c;
|
||||
background-image: var(--normal-bg);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.12);
|
||||
border-radius: 4px;
|
||||
padding: 0.3em 3em 0.3em 1em;
|
||||
margin: 0;
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#root:hover {
|
||||
background-image: var(--hover-bg);
|
||||
}
|
||||
|
||||
#root:focus:hover {
|
||||
box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.25);
|
||||
}
|
||||
|
||||
#root:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
bottom: 5px;
|
||||
width: 0;
|
||||
border-width: 0 1px;
|
||||
border-color: #000 rgba(0, 0, 0, .2) #000 rgba(255, 255, 255, .6);
|
||||
right: 2em;
|
||||
border-style: solid;
|
||||
background-blend-mode: multiply;
|
||||
}
|
||||
|
||||
#root > svg {
|
||||
position: absolute;
|
||||
right: .5em;
|
||||
top: .6em;
|
||||
}
|
||||
|
||||
#dropdown {
|
||||
position: absolute;
|
||||
min-width: calc(100% - 2px);
|
||||
top: 100%;
|
||||
left: 0;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.12);
|
||||
|
||||
margin: -5px 1px 0 1px;
|
||||
padding-top: 5px;
|
||||
white-space: nowrap;
|
||||
border-radius: 0 0 4px 4px;
|
||||
|
||||
background: #fff;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
:host(:not([aria-expanded="true"])) #dropdown {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#spacer {
|
||||
appearance: none;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
margin: 0 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#spacer > a,
|
||||
#dropdown > a {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
padding: 0.3em calc(3em - 1px) 0.3em calc(1em - 1px);
|
||||
border-bottom: 1px solid #eee;
|
||||
text-decoration: none;
|
||||
color: var(--link-color);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#dropdown > a:last-child {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#dropdown > a:hover {
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
a.latest:after {
|
||||
content: "LATEST";
|
||||
position: absolute;
|
||||
right: .4rem;
|
||||
font-size: 0.6em;
|
||||
font-weight: 700;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
<a id="root" role="button" aria-labelledby="selected" aria-controls="dropdown" tabindex="0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6l6-6"/></g></svg>
|
||||
<span id="selected"></span>
|
||||
</a>
|
||||
<div id="dropdown" role="navigation"></div>
|
||||
<div id="spacer" aria-hidden="true"></div>
|
||||
`;
|
||||
|
||||
class VersionSelector extends HTMLElement {
|
||||
static get observedAttributes() {
|
||||
return ['selected'];
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({mode: 'open'});
|
||||
this._onBlur = (e => {
|
||||
this._expand(false);
|
||||
this.removeEventListener('blur', this._onBlur);
|
||||
}).bind(this);
|
||||
}
|
||||
|
||||
async connectedCallback() {
|
||||
const {shadowRoot} = this;
|
||||
const frag = this._makeFragment(tpl);
|
||||
|
||||
frag.querySelector('#selected').textContent = `${PREFIX}${this.getAttribute('selected')}`;
|
||||
|
||||
const pathName = location.pathname.replace(/\/docs(\/((latest|\d+\.\d+)\/?)?)?/, '');
|
||||
const versionsDOMText = DOC_VERSIONS.map((v, idx) => `<a href="/docs/${v}/${pathName}"${idx === 0 ? ' class="latest"' : ''}>${PREFIX}${v}</a>`)
|
||||
.join('');
|
||||
|
||||
frag.querySelector('#dropdown').appendChild(this._makeFragment(versionsDOMText));
|
||||
frag.querySelector('#spacer').appendChild(this._makeFragment(versionsDOMText));
|
||||
|
||||
shadowRoot.appendChild(frag);
|
||||
|
||||
this._instrument(shadowRoot);
|
||||
}
|
||||
|
||||
_instrument(shadowRoot) {
|
||||
shadowRoot.querySelector('#root').addEventListener('click', e => {
|
||||
this._expand(this.getAttribute('aria-expanded') !== 'true');
|
||||
});
|
||||
}
|
||||
|
||||
_expand(flag) {
|
||||
this.setAttribute('aria-expanded', flag);
|
||||
if (flag) this.addEventListener('blur', this._onBlur);
|
||||
}
|
||||
|
||||
_makeFragment(html) {
|
||||
return document.createRange().createContextualFragment(html);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('version-selector', VersionSelector);
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
permalink: /assets/js/version-selector.js
|
||||
---
|
||||
(() => {
|
||||
{% assign current_array = site.data.versions.current | split: '!' %}
|
||||
{% assign all_versions = current_array | concat: site.data.versions.past %}
|
||||
const DOC_VERSIONS = {{ all_versions | jsonify }};
|
||||
{% include_relative _version-selector.js %}
|
||||
})();
|
Loading…
Reference in New Issue