Skip to content

GitLab

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

style adjustments

parent 8e9c182f
Expand all Hide whitespace changes
Inline Side-by-side
assets/css/main.css
View file @ 4787c3ed
This diff is collapsed.
assets/js/main.js
View file @ 4787c3ed
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()
assets/js/tabs-block-behavior.js
View file @ 4787c3ed
......@@ -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()
}
......
assets/js/toggle-behavior.js 0 → 100644
View file @ 4787c3ed
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))
}
}
pages/_layouts/_component.njk 0 → 100644
View file @ 4787c3ed
{% 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 %}
pages/_layouts/_editor-content.njk 0 → 100644
View file @ 4787c3ed
<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 }}
pages/_layouts/_plain-content.njk 0 → 100644
View file @ 4787c3ed
{{ item.contents | safe }}
pages/_layouts/main.njk
View file @ 4787c3ed
{% 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>
......
pages/assets/img/arrow-right-long-white.svg 0 → 100644
View file @ 4787c3ed
<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>
pages/assets/img/arrow-right-long.svg 0 → 100644
View file @ 4787c3ed
<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>
pages/assets/img/circle.svg 0 → 100644
View file @ 4787c3ed
<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>
pages/index.adoc
View file @ 4787c3ed
......@@ -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

Copyright © Eclipse Foundation, Inc. All Rights Reserved.     Privacy Policy | Terms of Use | Copyright Agent