Commit 4787c3ed authored by Guillaume Grossetie's avatar Guillaume Grossetie 🎧
Browse files

style adjustments

parent 8e9c182f
This diff is collapsed.
import { init as initTabSet } from './tabs-block-behavior.js'
import { init as initToggle } from './toggle-behavior.js'
import { init as initInteractiveEditor } from './interactive-editor.js'
initTabSet()
initToggle()
initInteractiveEditor()
......@@ -18,21 +18,44 @@ export function init() {
tab.classList.remove('is-active')
if (pane) pane.classList.remove('is-active')
}
tab.addEventListener('click', activateTab.bind({ tabset: tabset, tab: tab, pane: pane }))
tab.addEventListener('click', activateTab.bind({ tabset: tabset, tab: tab, pane: pane, id: id }))
})
if (!active && first) {
first.tab.classList.add('is-active')
if (first.pane) first.pane.classList.add('is-active')
}
}
var select = tabset.querySelector('.select > select')
if (select) {
select.addEventListener('change', (event) => {
console.log(event)
var id = event.target.value
if (!id) return
const anchor = document.getElementById(id)
const tab = anchor.parentElement.parentElement
var pane = getPane(id, tabset)
activateTab.bind({ tabset: tabset, tab: tab, pane: pane, id: id })(event)
})
}
tabset.classList.remove('is-loading')
})
function activateTab (e) {
var tab = this.tab
var pane = this.pane
find(':scope > .tabs li, :scope > .content > .tab-pane', this.tabset).forEach(function (it) {
it === tab || it === pane ? it.classList.add('is-active') : it.classList.remove('is-active')
var id = this.id
var tabset = this.tabset
if (id && tabset) {
var select = tabset.querySelector('.select > select')
if (select) {
select.value = id
}
}
find(':scope > .tabs li', this.tabset).forEach(function (it) {
it === tab ? it.classList.add('is-active') : it.classList.remove('is-active')
})
find(':scope > .content > .tab-pane', this.tabset).forEach(function (it) {
it === pane ? it.classList.add('is-active') : it.classList.remove('is-active')
})
e.preventDefault()
}
......
export function init() {
find('.toggleset').forEach(function (toggleset) {
find(':scope > .toggle > a', toggleset).forEach(function (item) {
item.addEventListener('click', function(event) {
find(':scope > .toggle > a', toggleset).forEach(function (it) {
it === item ? it.classList.add('is-active') : it.classList.remove('is-active')
})
find(':scope > .content > *', toggleset).forEach(function (it) {
it.getAttribute('aria-labelledby') === item.id ? it.classList.add('is-active') : it.classList.remove('is-active')
})
})
})
})
function find (selector, from) {
return Array.prototype.slice.call((from || document).querySelectorAll(selector))
}
}
{% macro tabset(content, type='plain') %}
<div class="tabset">
<div class="select">
<select>
{% for item in content.items %}
<option value="tabset{{ content.index }}{{ item.id }}">{{ item.title }}</option>
{% endfor %}
</select>
</div>
<div class="ulist tabs">
<ul>
{% for item in content.items %}
<li>
<p><a id="tabset{{ content.index }}{{ item.id }}"></a>{{ item.title }}</p>
</li>
{% endfor %}
</ul>
</div>
<div class="content">
{% for item in content.items %}
<div class="tab-pane" aria-labelledby="tabset{{ content.index }}{{ item.id }}">
{% if type === 'editor' %}
{% include "./_editor-content.njk" %}
{% else %}
{% include "./_plain-content.njk" %}
{% endif %}
</div>
{% endfor %}
</div>
</div>
{% endmacro %}
<h4>{{ item.title }}</h4>
<div class="editor from">
<div class="editor-frame">
<div class="editor-header">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div class="editor-content">
<div class="tabset">
<div class="ulist tabs">
<ul>
{% for file in item.contents.from.files %}
<li>
<p><a id="tabset{{ item.contents.from.index }}{{ file.name }}"></a>{{ file.name }}</p>
</li>
{% endfor %}
</ul>
</div>
<div class="content">
{% for file in item.contents.from.files %}
<div class="tab-pane" aria-labelledby="tabset{{ item.contents.from.index }}{{ file.name }}">
{{ file.contents | safe }}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{{ item.contents.from.explanation | safe }}
<h4>to AsciiDoc</h4>
<div class="editor to">
<div class="editor-frame">
<div class="editor-header">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div class="editor-content">
<div class="tabset">
<div class="ulist tabs">
<ul>
{% for file in item.contents.to.files %}
<li>
<p><a id="tabset{{ item.contents.to.index }}{{ file.name }}"></a>{{ file.name }}</p>
</li>
{% endfor %}
</ul>
</div>
<div class="content">
{% for file in item.contents.to.files %}
<div class="tab-pane" aria-labelledby="tabset{{ item.contents.to.index }}{{ file.name }}">
{{ file.contents | safe }}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{{ item.contents.to.explanation | safe }}
{{ item.contents | safe }}
{% import "./_component.njk" as component %}
<!DOCTYPE html>
<html lang="en">
<head>
......@@ -57,24 +59,7 @@
<div class="column">
{% for content in content.about.contents %}
{% if content.type == 'tabs' %}
<div class="tabset">
<div class="ulist tabs">
<ul>
{% for item in content.items %}
<li>
<p><a id="tabset{{ content.index }}{{ item.id }}"></a>{{ item.title }}</p>
</li>
{% endfor %}
</ul>
</div>
<div class="content">
{% for item in content.items %}
<div class="tab-pane" aria-labelledby="tabset{{ content.index }}{{ item.id }}">
{{ item.contents | safe }}
</div>
{% endfor %}
</div>
</div>
{{ component.tabset(content) }}
{% endif %}
{% endfor %}
</div>
......@@ -90,9 +75,15 @@
{% for content in content['try-it-out'].contents %}
{{ content.contents | safe }}
{% endfor %}
<div id=editor>
<div id="editorCode"></div>
<div id="editorPreview"></div>
<div class="toggleset">
<div class="toggle">
<a class="is-active" id="toggle1_asciidoc">AsciiDoc</a>
<a id="toggle1_preview">Preview</a>
</div>
<div class="content" id=editor>
<div class="is-active" aria-labelledby="toggle1_asciidoc" id="editorCode"></div>
<div aria-labelledby="toggle1_preview" id="editorPreview"></div>
</div>
</div>
</div>
</div>
......@@ -110,85 +101,7 @@
{% endfor %}
{% for content in content.compare.contents %}
{% if content.type == 'tabs' %}
<div class="tabset">
<div class="ulist tabs">
<ul>
{% for item in content.items %}
<li>
<p><a id="tabset{{ content.index }}{{ item.id }}"></a>{{ item.title }}</p>
</li>
{% endfor %}
</ul>
</div>
<div class="content">
{% for item in content.items %}
<div class="tab-pane" aria-labelledby="tabset{{ content.index }}{{ item.id }}">
<h4>{{ item.title }}</h4>
<div class="editor from">
<div class="editor-frame">
<div class="editor-header">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div class="editor-content">
<div class="tabset">
<div class="ulist tabs">
<ul>
{% for file in item.contents.from.files %}
<li>
<p><a id="tabset{{ item.contents.from.index }}{{ file.name }}"></a>{{ file.name }}</p>
</li>
{% endfor %}
</ul>
</div>
<div class="content">
{% for file in item.contents.from.files %}
<div class="tab-pane" aria-labelledby="tabset{{ item.contents.from.index }}{{ file.name }}">
{{ file.contents | safe }}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{{ item.contents.from.explanation | safe }}
<h4>to AsciiDoc</h4>
<div class="editor to">
<div class="editor-frame">
<div class="editor-header">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div class="editor-content">
<div class="tabset">
<div class="ulist tabs">
<ul>
{% for file in item.contents.to.files %}
<li>
<p><a id="tabset{{ item.contents.to.index }}{{ file.name }}"></a>{{ file.name }}</p>
</li>
{% endfor %}
</ul>
</div>
<div class="content">
{% for file in item.contents.to.files %}
<div class="tab-pane" aria-labelledby="tabset{{ item.contents.to.index }}{{ file.name }}">
{{ file.contents | safe }}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{{ item.contents.to.explanation | safe }}
</div>
{% endfor %}
</div>
</div>
{{ component.tabset(content, type='editor') }}
{% endif %}
{% endfor %}
</div>
......@@ -244,7 +157,14 @@
</div>
</section>
</main>
<footer class="footer">© 2022 AsciiDoc. All rights reserved</footer>
<footer class="footer">
<div class="logo">
<img src="./assets/img/asciidoc-horizontal-white.svg" alt="AsciiDoc Logo"/>
</div>
<div class="copyright">
© 2022 AsciiDoc. All rights reserved
</div>
</footer>
<script src="./assets/js/main.bundle.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.3/highlight.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js/dist/highlightjs-line-numbers.min.js"></script>
......
<svg width="16" height="10" viewBox="0 0 16 10" xmlns="http://www.w3.org/2000/svg">
<path d="M10.1958 1.47145C9.9354 1.2111 9.9354 0.788986 10.1958 0.528636C10.4561 0.268287 10.8782 0.268287 11.1386 0.528636L15.1386 4.52864C15.3989 4.78899 15.3989 5.2111 15.1386 5.47144L11.1386 9.47144C10.8782 9.73179 10.4561 9.73179 10.1958 9.47144C9.9354 9.21109 9.9354 8.78899 10.1958 8.52864L13.0577 5.6667H1.34101C0.968761 5.6667 0.666992 5.36822 0.666992 5.00003C0.666992 4.63184 0.968761 4.33336 1.34101 4.33336H13.0577L10.1958 1.47145Z" fill="#fff"/>
</svg>
<svg width="16" height="10" viewBox="0 0 16 10" xmlns="http://www.w3.org/2000/svg">
<path d="M10.1958 1.47145C9.9354 1.2111 9.9354 0.788986 10.1958 0.528636C10.4561 0.268287 10.8782 0.268287 11.1386 0.528636L15.1386 4.52864C15.3989 4.78899 15.3989 5.2111 15.1386 5.47144L11.1386 9.47144C10.8782 9.73179 10.4561 9.73179 10.1958 9.47144C9.9354 9.21109 9.9354 8.78899 10.1958 8.52864L13.0577 5.6667H1.34101C0.968761 5.6667 0.666992 5.36822 0.666992 5.00003C0.666992 4.63184 0.968761 4.33336 1.34101 4.33336H13.0577L10.1958 1.47145Z" fill="#1f8197"/>
</svg>
<svg width="106" height="106" viewBox="0 0 106 106" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="52.7227" cy="53.3889" r="52.5" transform="rotate(-180 52.7227 53.3889)" fill="#1F8197"/>
</svg>
......@@ -23,10 +23,8 @@ image::./assets/img/dillinger.png[]
* image:./assets/img/neo4j-logo-white.svg[]
* image:./assets/img/redhat-logo-white.svg[]
* image:./assets/img/cloudbees-logo-white.svg[]
* image:./assets/img/fauna-logo-white.svg[]
* image:./assets/img/fedora-logo-white.svg[]
// Couchbase - MuleSoft - Pivotal - neo4j - Red Hat - CloudBees - Fauna - Fedora
//* image:./assets/img/fauna-logo-white.svg[]
//* image:./assets/img/fedora-logo-white.svg[]
[#about,separator=.]
== Write once, publish anywhere. Write READMEs, books, or anything in between
......@@ -48,7 +46,7 @@ image::./assets/img/docs-site-mulesoft.png[]
[.tab]
--
[discrete]
=== Blog Article
=== Article
image::./assets/img/blog-openliberty.png[]
--
......@@ -260,7 +258,7 @@ AsciiDoc processors bundle a **stylesheet** that requires **no web development**
--
[#specifications]
== Governed by a language specification, always evolving
== Specification process: Governed by a language specification, always evolving
Although you'll likely interact with AsciiDoc through one of the language processors or an editor with AsciiDoc support, AsciiDoc is just the writing language.
The specification for that language is managed and governed by the AsciiDoc Language project and, at a higher level, by the AsciiDoc Working Group at the Eclipse Foundation.
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment