Commit 8e9c182f authored by MARIE FLORES's avatar MARIE FLORES Committed by Guillaume Grossetie
Browse files

add interactive editor

parent cd2323c6
......@@ -5,9 +5,13 @@ const asciidoctor = require('@asciidoctor/core')()
const documentModelConverter = require(`${__dirname}/lib/document-model-converter.js`)
module.exports = function (eleventyConfig, rest) {
eleventyConfig.ignores.add("pages/examples/**");
eleventyConfig.addPassthroughCopy('pages/**/*.{jpg,png,gif,svg,ico,css,txt,json,js}');
eleventyConfig.addPassthroughCopy('assets/**/*.{jpg,png,gif,svg,ico,css,txt,json,js}');
eleventyConfig.ignores.add("pages/examples/**")
eleventyConfig.addPassthroughCopy('pages/**/*.{jpg,png,gif,svg,ico,css,txt,json,js}')
eleventyConfig.addPassthroughCopy('assets/**/*.{jpg,png,gif,svg,ico,css,txt,json}')
eleventyConfig.setBrowserSyncConfig({
files: ['_site/**/*'],
open: true,
})
eleventyConfig.addExtension('adoc', {
compile: function (fileContents, path) {
return function (data) {
......
This diff is collapsed.
......@@ -386,8 +386,214 @@ section.try .paragraph {
max-width: 925px;
}
section.try img {
box-shadow: 0px 4px 30px 0px #00000026;
#editor {
margin: 50px auto 40px;
background-color: #F9FAFB;
box-shadow: 0 7px 7px rgb(0 0 0 / 10%), 0 -2px 3px rgb(0 0 0 / 13%);
border-radius: 5px 5px 5px 5px;
}
@media screen and (min-width: 920px) {
#editor {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 340px;
}
}
#editorCode {
color: var(--gray-color-600);
font-size: 1rem;
min-height: 300px;
}
#editorCode .cm-editor {
max-height: 340px;
}
#editorCode .cm-scroller {
border-radius: 5px;
}
#editorPreview h1, #editorPreview h2, #editorPreview h3 {
color: var(--brand-color);
}
#editorPreview {
border-left: 5px solid #F0F0F0;
border-radius: 0px 5px 5px 0px;
color: var(--gray-color-600);
padding-left: 1rem;
padding-right: 1rem;
overflow-x: auto;
padding-bottom: 1.5rem;
}
#editorPreview * {
all: revert
}
#editorPreview .hljs {
color:#333;
display: block;
overflow-x: auto;
padding: 0.5em;
background: #ebebeb;
}
#editorPreview .hljs-doctag,
#editorPreview .hljs-keyword,
#editorPreview .hljs-meta
#editorPreview .hljs-keyword,
#editorPreview .hljs-template-tag,
#editorPreview .hljs-template-variable,
#editorPreview .hljs-type,
#editorPreview .hljs-variable.language_ {
color: #d73a49
}
#editorPreview .hljs-title,
#editorPreview .hljs-title.class_,
#editorPreview .hljs-title.class_.inherited__,
#editorPreview .hljs-title.function_ {
color: #6f42c1
}
#editorPreview .hljs-attr,
#editorPreview .hljs-attribute,
#editorPreview .hljs-literal,
#editorPreview .hljs-meta,
#editorPreview .hljs-number,
#editorPreview .hljs-operator,
#editorPreview .hljs-selector-attr,
#editorPreview .hljs-selector-class,
#editorPreview .hljs-selector-id,
#editorPreview .hljs-variable {
color: #005cc5
}
#editorPreview .hljs-meta
#editorPreview .hljs-string,
#editorPreview .hljs-regexp,
#editorPreview .hljs-string {
color: #718c00
}
#editorPreview .hljs-built_in,
#editorPreview .hljs-symbol {
color: #e36209
}
#editorPreview .hljs-code,
#editorPreview .hljs-comment,
#editorPreview .hljs-formula {
color: #6a737d
}
#editorPreview .hljs-name,
#editorPreview .hljs-quote,
#editorPreview .hljs-selector-pseudo,
#editorPreview .hljs-selector-tag {
color: #22863a
}
#editorPreview .hljs-subst {
color: #24292e
}
#editorPreview .hljs-section {
color: #005cc5;
font-weight: 700
}
#editorPreview .hljs-bullet {
color: #735c0f
}
#editorPreview .hljs-emphasis {
color: #24292e;
font-style: italic
}
#editorPreview .hljs-strong {
color: #24292e;
font-weight: 700
}
#editorPreview .hljs-addition {
color: #22863a;
background-color: #f0fff4
}
#editorPreview .hljs-deletion {
color: #b31d28;
background-color: #ffeef0
}
#editorPreview .listingblock > .content {
position: relative
}
#editorPreview .listingblock code[data-lang]::before {
display: none;
content: attr(data-lang);
position: absolute;
font-size: .75em;
top: .425rem;
right: .5rem;
line-height: 1;
text-transform: uppercase;
color: inherit;
opacity: .5
}
#editorPreview .listingblock:hover code[data-lang]::before {
display: block
}
#editorPreview .listingblock.terminal pre .command::before {
content: attr(data-prompt);
padding-right: .5em;
color: inherit;
opacity: .5
}
#editorPreview .listingblock.terminal pre .command:not([data-prompt])::before {
content: "$"
}
#editorPreview .listingblock pre.highlight {
padding: 0
}
#editorPreview .listingblock pre.highlight > code {
padding: 1em;
-webkit-border-radius: 4px;
border-radius: 4px
}
#editorPreview .listingblock pre.prettyprint {
border-width: 0
}
#editorPreview p {
margin: 0;
padding-bottom: 0.75rem;
}
@media screen and (max-width: 768px) {
#editorPreview {
border-left: none;
border-top: 5px solid #F0F0F0;
padding-top: 0.5rem;
margin-top: 1rem;
}
#editor {
margin: 0;
margin-left: -1rem;
margin-right: -1rem;
border-radius: 0;
}
}
section.compare {
......@@ -484,7 +690,7 @@ section.specifications h2 {
}
section.specifications a {
padding-top: 1.5rem;
margin-top: 1.5rem;
color: white;
display: block;
}
......
/* global Asciidoctor */
import Asciidoctor from '@asciidoctor/core'
import { EditorState } from '@codemirror/state'
import { EditorView, keymap } from '@codemirror/view'
import { lineNumbers } from '@codemirror/gutter'
import { standardKeymap } from '@codemirror/commands'
import { history, historyKeymap } from '@codemirror/history'
import hljs from 'highlight.js'
export function init() {
const processor = Asciidoctor()
const input = `= Hello, AsciiDoc!
Doc Writer <doc@example.com>
An introduction to https://asciidoc.org[AsciiDoc].
== First Section
* item 1
* item 2
[source,ruby]
puts 'Hello, World!'`
const editor = document.getElementById('editorCode')
const editorPreview = document.getElementById('editorPreview')
const state = EditorState.create({
doc: input,
extensions: [
lineNumbers(),
keymap.of(
...standardKeymap,
...historyKeymap
),
history(),
EditorView.updateListener.of((update) => {
if (update.docChanged) {
debounce(() => convertToHtml(), 500)()
}
})
]
})
const view = new EditorView({ state })
editor.appendChild(view.dom)
function convertToHtml() {
editorPreview.innerHTML = processor.convert(view.state.doc.text, {
attributes: { showtitle: '', icons: 'font' }
})
;[].slice.call(editorPreview.querySelectorAll('pre.highlight > code')).forEach(function (el) {
hljs.highlightBlock(el)
})
}
function debounce(func, duration) {
let timeout
return function (...args) {
const effect = () => {
timeout = null
return func.apply(this, args)
}
clearTimeout(timeout)
timeout = setTimeout(effect, duration)
}
}
convertToHtml()
}
import { init as initTabSet } from './tabs-block-behavior.js'
import { init as initInteractiveEditor } from './interactive-editor.js'
initTabSet()
initInteractiveEditor()
;(function () {
'use strict'
export function init() {
var hash = window.location.hash
find('.tabset').forEach(function (tabset) {
......@@ -47,4 +46,4 @@
return it.getAttribute('aria-labelledby') === id
})
}
})()
}
This diff is collapsed.
......@@ -4,12 +4,22 @@
"version": "1.0.0",
"license": "EPL-2.0",
"scripts": {
"build": "ELEVENTY_EXPERIMENTAL=true eleventy --config .eleventy.js",
"start": "ELEVENTY_EXPERIMENTAL=true eleventy --serve --config .eleventy.js"
"build": "rollup -c --environment BUILD:production && ELEVENTY_EXPERIMENTAL=true eleventy --config .eleventy.js",
"start": "rollup -c -w & ELEVENTY_EXPERIMENTAL=true eleventy --serve --config .eleventy.js"
},
"devDependencies": {
"@11ty/eleventy": "~1.0",
"@asciidoctor/core": "^2.2",
"node-html-parser": "^5.2.0"
"@asciidoctor/core": "^2.2.6",
"@codemirror/commands": "^0.19.8",
"@codemirror/gutter": "^0.19.9",
"@codemirror/history": "^0.19.2",
"@codemirror/state": "^0.19.6",
"@codemirror/text": "^0.19.6",
"@codemirror/view": "^0.19.40",
"@rollup/plugin-commonjs": "^21.0.1",
"@rollup/plugin-node-resolve": "^13.1.3",
"node-html-parser": "^5.2.0",
"rollup": "^2.67.0",
"rollup-plugin-terser": "^7.0.2"
}
}
......@@ -9,11 +9,12 @@
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.3/styles/default.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/monokai-sublime.min.css">
<link rel="stylesheet" href="./assets/css/main.css">
<link rel="stylesheet" href="./assets/css/doc.css">
</head>
<body>
<header class="header">
<nav>
<div class="logo"><img src="./assets/img/asciidoc-horizontal-white.svg" alt="AsciiDoc Logo" /></div>
<div class="logo"><img src="./assets/img/asciidoc-horizontal-white.svg" alt="AsciiDoc Logo"/></div>
<ul class="menu">
<li><a href="#about">About</a></li>
<li><a href="#compare">Compare</a></li>
......@@ -43,7 +44,7 @@
<div class="column">
<h2>{{ content.about.title }}</h2>
{% if content.about.subtitle %}
<h3>{{ content.about.subtitle }}</h3>
<h3>{{ content.about.subtitle }}</h3>
{% endif %}
<div class="content">
{% for content in content.about.contents %}
......@@ -55,25 +56,25 @@
</div>
<div class="column">
{% for content in content.about.contents %}
{% if content.type == 'tabs' %}
<div class="tabset">
<div class="ulist tabs">
<ul>
{% 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 %}
<li>
<p><a id="tabset{{ content.index }}{{ item.id }}"></a>{{ item.title }}</p>
</li>
<div class="tab-pane" aria-labelledby="tabset{{ content.index }}{{ item.id }}">
{{ item.contents | safe }}
</div>
{% 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>
{% endif %}
{% endfor %}
</div>
......@@ -83,19 +84,23 @@
<div class="container">
<h2 id="try">{{ content['try-it-out'].title }}</h2>
{% if content['try-it-out'].subtitle %}
<h3>{{ content['try-it-out'].subtitle }}</h3>
<h3>{{ content['try-it-out'].subtitle }}</h3>
{% endif %}
<div class="content">
{% for content in content['try-it-out'].contents %}
{{ content.contents | safe }}
{% endfor %}
<div id=editor>
<div id="editorCode"></div>
<div id="editorPreview"></div>
</div>
</div>
</div>
</section>
<section class="compare">
<h2 id="compare">{{ content.compare.title }}</h2>
{% if content.compare.subtitle %}
<h3>{{ content.compare.subtitle }}</h3>
<h3>{{ content.compare.subtitle }}</h3>
{% endif %}
<div class="content">
{% for content in content.compare.contents %}
......@@ -104,7 +109,7 @@
{% endif %}
{% endfor %}
{% for content in content.compare.contents %}
{% if content.type == 'tabs' %}
{% if content.type == 'tabs' %}
<div class="tabset">
<div class="ulist tabs">
<ul>
......@@ -191,7 +196,7 @@
<section class="specifications">
<h2 id="specifications">{{ content.specifications.title }}</h2>
{% if content.specifications.subtitle %}
<h3>{{ content.specifications.subtitle }}</h3>
<h3>{{ content.specifications.subtitle }}</h3>
{% endif %}
<div class="content">
{% for content in content.specifications.contents %}
......@@ -204,7 +209,7 @@
<section class="tools">
<h2 id="tools">{{ content.tools.title }}</h2>
{% if content.tools.subtitle %}
<h3>{{ content.tools.subtitle }}</h3>
<h3>{{ content.tools.subtitle }}</h3>
{% endif %}
<div class="content">
<div class="cards">
......@@ -228,23 +233,25 @@
<section class="docs">
<h2 id="docs">{{ content.docs.title }}</h2>
{% if content.docs.subtitle %}
<h3>{{ content.docs.subtitle }}</h3>
<h3>{{ content.docs.subtitle }}</h3>
{% endif %}
<div class="content">
{% for content in content.docs.contents %}
{% if content.type == 'html' %}
{{ content.contents | safe }}
{% endif %}
{% endfor %}
{% for content in content.docs.contents %}
{% if content.type == 'html' %}
{{ content.contents | safe }}
{% endif %}
{% endfor %}
</div>
</section>
</main>
<footer class="footer">© 2022 AsciiDoc. All rights reserved</footer>
<script src="./assets/js/tabs-block-behavior.js"></script>
<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>
<script>
hljs.registerLanguage("rst",function(e){return {}})
hljs.registerLanguage("rst", function (e) {
return {}
})
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.3/languages/asciidoc.min.js"></script>
<script>
......@@ -256,5 +263,6 @@
hljs.initLineNumbersOnLoad()
}
</script>
</body>
</html>
......@@ -91,7 +91,7 @@ image::./assets/img/man-page-git-for-each-ref.png[]
AsciiDoc was designed to strike a balance between a formalized, machine-oriented syntax and raw text with shorthands.
In fact, it's able to capture and encode nearly all of the semantics of a formalized language while still looking mostly like raw text.
image::./assets/img/interactive.png[]
[#compare.compare,separator=?]
== How does it stack up? Compare AsciiDoc against alternative document formats
......
import { nodeResolve } from "@rollup/plugin-node-resolve"
import commonjs from "@rollup/plugin-commonjs"
import { terser } from "rollup-plugin-terser"
if (process.env.BUILD === 'production') {
}
export default {
input: "assets/js/main.js",
output: {
file: "_site/assets/js/main.bundle.js",
format: "iife",
strict: false // Opal does not work in strict mode :|
},
plugins: [
nodeResolve({ browser: true }),
commonjs(),
process.env.BUILD === 'production' ? terser() : ''
]
}
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