d ocu mentat i on wi t h any e d i tor · ms word / libreoﬀice with sharepoint or mail several...

@stoeps #froscon13 #AnyEditor1

Documentation With Any Editor

Christoph Stoettner

http://creativecommons.org/licenses/by-sa/4.0/


Thank youMy wife and my children

Organisation team of Froscon 2018

developers

developers

Thanks to all sponsors and attendees

Asciidoctor

DocToolChain


https://asciidoctor.org/

https://doctoolchain.github.io/docToolchain/


Christoph StoettnerIBM Application Servers

Installation, Configuration

Performance Optimization, Stresstesting

Started with Linux / OSS around 1994/1995

Linux Kernel < 1.0

Slackware

VIM lover

maybe too stupid for Emacs

I’m mainly Administrator using Developer tools



My history of documentationContent of most of my documentations

Config options (XML, GUI)

Screenshots (GUI)

Parts of Property Files

Used tools

MS Excel / Libreoffice (with Dropbox)

MS Word / Libreoffice with Sharepoint or Mail

Several Wiki engines, Evernote

LaTex and Docbook



My needsSearchable documentation

Editing on mobile, tablet, notebook, customer computer, server (ssh)

Output formats depend on customer and project

Offline support

Version Control

Include config settings of *.xml, *.properties

No manual task to update output format



Why did I switch the tools?Evernote

Linux client long time a problem

New license limits device count

No markdown support

Office

Compatibility

Edit on different devices, versions

Sometimes switching printer is enough to flip images around

Copy&Paste of screenshots and config file settings



Why not using a wiki?Edit from mobile o�en a pain

Documenting the Wiki itself?

Not accessible when down

Syntax different from one wiki to another

Customer / PM o�en needs something printed / printer friendly

AND manual copy&paste



Markdown and rstI started writing in Markdown

Some so�ware supports markdown directly

Cool WYSIWIG editors

Great for typing notes (Still using it on mobile)

But a little bit to simple

including source files missing



Asciidoc / Asciidoc: language definition

: Ruby project to convert asciidoc source to * output

Text only, Human readable

Version Control with GIT

Only some short syntax tips

More automation later

Differences to Markdown

Asciidoctor

Asciidoctor

https://github.com/asciidoctor/asciidoctor.org/blob/master/docs/_includes/asciidoc-vs-markdown.adoc




https://github.com/asciidoctor/asciidoctor.org/blob/master/docs/_includes/asciidoc-vs-markdown.adoc


H1 only appears once in Asciidoctornumbered can be set in document header for allheadings

Syntax - Headings1 Headings numbered2 Headings without numbers

:numbered: == H2 === H3 ==== H4 :!numbered: == H2 === H3 ==== H4

1

2



Heading above blocks and imagesCan be used with images and all kind of blocks, no TOC entry

1 Heading above Code block2 Image heading

.Heading [source] ---- ls -al ---- .Image image::images/test.png[]

1

2



Syntax - Lists=== Bullet Points * Bullet Points ** Sub Bullet Point === Numbered Lists . Numbered List .. Sub 1 .. Sub 2 . Numbered 2 === Definition Lists CPU:: The brain of the computer. Hard drive:: Permanent storage for operating system...



Links, ImagesLinks

1 Shows just the link2 Link text in brackets

Images

1 You can add roles to all elements and use CSS for formatting2 Add a title tag to image3 One colon a�er image → inline image, double color → figure

https://www.stoeps.de[] https://www.stoeps.de[Stoeps]

1

2

image::sunset.jpg[] image::sunset.jpg[role=right] image::sunset.jpg[Sunset] image:sunset.jpg[]

1

2

3



Some Examples

Use Inline IconsYou can add any Font Awesome Icon

Enable in document header

:icons: font

icon:twitter[] Twitter https://twitter.com[@stoeps] icon:linux[] Linux Icon icon:windows[] Windows Icon



Admonition BlocksAdmonition blocks (Warning, Caution, Important, Note, Tip)

Font-Awesome Icons with :icons: font

This is a warning

This is a caution

This is important

WARNING: This is a warning

CAUTION: This is a caution

IMPORTANT: This is important



Admonition Blocks in Html and PDFNOTE: A note TIP: Here is a tip IMPORTANT: That's important WARNING: Warning message CAUTION: Caution, be careful



Menus, Keys and Buttons

1 Following features need experimental set

:experimental: 1

.Copy Text menu:Edit[Copy Special > Text] .Button Press kbd:[OK] .Keyboard kbd:[Ctrl+C] to stop this.



SourcecodeAdding [source]

Syntax Highlighting with Pygments, Highlightjs or Rouge

.A Python function [source,python] ---- def function(): var x = 10 return x ----

:source-highlighter: pygments



Including FilesSplit longer documents and include Asciidoc Source

Include any type of files in [source]

Powerful

Include complete files

Include only parts

1 Include entire file2 Include lines 10-153 Include area between mytag tags tag::mytag, end::mytag

include::path/filename[] include::path/filename[lines=10..15] include::path/filename[tags=mytag]

1

2

3


Example Include

Include in our asciidoc source

Included source

... <title>example</title>   </head><body> <h1>Test</h1>  </body> ...

[source, indent=0] ---- include::test.html[tags=stoeps] ----

 </head> <body> <h1>Test</h1>


Callouts in Sources

1 Hardcoded variable

[source] ---- def function: x = 'secret' # <1> print(secret) return 0 ---- <1> Hardcoded variable

def function: x = 'secret' print(secret) return 0

1



VariablesDefinition

1 Generic definition2 Variable OS set to Linux3 Variable SLASH set to /

Windows Version

Linux Version

:variable: content :OS: Linux :SLASH: /

1

2

3

:OS: Windows Server 2016 Datacenter Edition :SLASH: \ :VERSION: 0.8

:OS: Linux :SLASH: / :VERSION: 8.5.5.4



Add Variables to extra fileInclude into main document (main.adoc)

Use generic variable file for example to store OS differences

Add additional one for project specific paths, hostnames

1 Main document2 Variables for Linux OS installations3 Variables for Windows installations4 Project specific variables

. ├── _attributes.asciidoc ├── images ├── include ├── main.adoc ├── more.asciidoc ├── _variables-linux.asciidoc ├── _variables_project.asciidoc └── _variables-win.asciidoc

1

2

4

3



Conditional DirectivesWithin main document show different informations based onvariables

1 Set OS = Linux2 If OS = Linux3 Set OS = Windows4 If OS = Windows

:OS: Linux ifeval::["{OS}" == "Linux"] icon:linux[] rocks! endif::[] :OS: Windows ifeval::["{OS}" == "Windows"] icon:windows[] really? endif::[] :OS: Linux

1

2

3

4



Including Diagrams

supports a lot of different formats

ditaa

plantuml

O�en enough to show a network or infrastructure overview

Like human readable

https://asciidoctor.org/docs/asciidoctor-diagram/

Asciidoctor

Asciidoctor


https://asciidoctor.org/docs/asciidoctor-diagram/




Diagram - ditaa[ditaa] .... +-------------+ | Asciidoctor |-------+ | diagram | | +-------------+ | PNG out ^ | | ditaa in | | v +--------+ +--------+----+ /---------------\ | | --+ Asciidoctor +--> | | |Document| +-------------+ | Beautiful | | {d}| | !magic! | | Output | +---+----+ +-------------+ \---------------/ ....



Plantumltitle "Network Plan" actor user [ User ] actor admin [ Administrator ] node http [ HTTP Server connect.example.com ] node dmgr [ WebSphere Deployment Manager dmgr.example.com ] database db2 [ DB2 Database Server db2.example.com ] user -down-> http:443/tcp admin -right-> dmgr:9043/tcp admin -down-> db2:50000/tcp dmgr -up-> http dmgr -down-> db2 center footer IBM Connections 6.0 Deployment endfooter



Plantuml Simple Flowdiagram[plantuml] .... start if (Graphviz installed?) then (yes) :process all\ndiagrams; else (no) :process only __sequence__ and __activity__ diagrams; endif stop ....



Putting everything togetherLet’s have a look at a simple document with the main parts

Automate with Gitlab and CI/CD

It’s also possible with Travis CI or Jenkins

Just to have a working example

Asciidoctor gradle

Git (with GitLab)

Gitlab CI/CD functionality

https://gitlab.com/stoeps/asciidoctor-documentation-example

https://gitlab.com/stoeps/froscon18-presentation


https://gitlab.com/stoeps/asciidoctor-documentation-example

https://gitlab.com/stoeps/froscon18-presentation


Main document (main.adoc) - header1 Document title2 Language3 Enable experimental features4 Title logo (for pdf title page)5 Create table of contents6 Default images directory7 Use Font Awesome Icons8 Use rouge for Syntax Highlighting9 Headings numbered10 Translation file for built-in labels, so the labels

for language used in (2) will be inserted

= Example Project Documentation :author: Christoph Stoettner :email: [email protected] :revnumber: 1.0 :revdate: 2018-08-24 :revremark: Froscon 2018 :encoding: utf-8 :lang: en :experimental: :title-logo-image: image::logo.png[] :toc: :imagesdir: images :doctype: article :icons: font :source-highlighter: rouge :quick-uri: https://www.stoeps.de :numbered: include::_variables-linux.asciidoc[] include::_variables-project.asciidoc[] include::_attributes.asciidoc[]

1

2

3

4

5

6

7

8

9

10



Attribute (translation of built-in labels)Example for german labels // German translation, courtesy of Florian Wilhelm ifeval::["{lang}" == "de"] :appendix-caption: Anhang :caution-caption: Achtung :chapter-label: Kapitel :example-caption: Beispiel :figure-caption: Abbildung :important-caption: Wichtig :last-update-label: Zuletzt aktualisiert //:listing-caption: Listing :manname-title: BEZEICHNUNG :note-caption: Anmerkung //:preface-title: Vorwort :table-caption: Tabelle :tip-caption: Hinweis :toc-title: Inhalt :untitled-label: Ohne Titel :version-label: Version :warning-caption: Warnung endif::[]



PrefaceFirst paragraph a�er header section

It’s Asciidoc best practise to write each sentence into one line

Paragraph until first blank line

In chapter Networkplan I include a plantuml file

include::_attributes.asciidoc[] Get tough with it, get strong. This is the way you take out your flustrations. Go out on a limb - that's where the fruit is. If we're gonna walk though the woods, we need a little path. Trees live in your fan brush, but you have to scare them out. == Networkplan



Conditions to show updated informations === Software Updates Here we check the `VERSION` from our variables doc. When we update the main document, it can happen that we adjust the version numbers, then new generated documents show this warning. ifeval::["{VERSION}" >= "8.5.5.7"] INFO: No updates needed! endif::[] ifeval::["{VERSION}" < "8.5.5.6"] WARNING: Update needed! endif::[]



Different Operating SystemsDocumention is splitted into generic parts

Differences

Slash or Backslash

.bat or .sh

Paths

Small differences I handle with ifeval::["{variable}" == "OS Type"]

Paths and hostnames are stored in _variables-xxx.asciidoc

So moving to a new version only needs adjustments in main.adoc



Including Configuration FilesWorking to get customers to commit configuration to internal gitservers

Adding these repositories to documentation repositoryGit Submodules

Git directories within repositories

git add submodule https://internal.gitserver.example.org/appserver/mainconfig.git



Build OutputsLots of different Outputs

Html 5

PDF

ePub

Docbook

Confluence Wiki

Reveal JS Presentation

A huge amount of outputs:





EditorsBest: you can use any editor on any device

Syntax Highlighting in the most important ones

VIM

Emacs

Notepad++

VSCode

On Windows, stay away from Notepad and Wordpad becausethey produce plain text which is not cross-platform friendly.

Documentation on editors


https://asciidoctor.org/docs/install-toolchain/#text-editors-and-syntax-highlighting


MobileI use git for all documents

Version Control

Good mobile clients (for small adjustments)

Android

Termux

Vim

Git



Preview(in the beginning) you will ask for WYSIWIG or Preview

VS Code has a builtin preview plugin

Check whitelist or you won’t see Font Awesome icons

convert your documents with make

with

Run make everytime when file is saved

Very powerful when you finalize documents or presentations

Browser Extension to render Asciidoc

Makefile

Guardfile Guard


https://github.com/asciidoctor/asciidoctor-browser-extension

https://gitlab.com/stoeps/froscon18-presentation/blob/master/Makefile

https://gitlab.com/stoeps/froscon18-presentation/blob/master/Guardfile

https://github.com/guard/guard


Convert your documentsAsciidoctor works on Windows, Linux or Mac

Installation

Ruby Gems or Package Manager

Convert on the command line

You need to install all dependencies

https://asciidoctor.org/docs/install-toolchain/

# Creates HTML of yourfile.adoc, name: yourfile.html asciidoctor yourfile.adoc # Create PDF asciidoctor-pdf yourfile.adoc


https://asciidoctor.org/docs/install-toolchain/


Docker-Asciidoctor

Easy to use

Runs on all OS which supports Docker

Windows, Linux & Mac OS

All dependencies already included

https://github.com/asciidoctor/docker-asciidoctor

https://hub.docker.com/r/asciidoctor/docker-asciidoctor/

# convert main.doc to html docker run --rm -v $(pwd):/documents/ asciidoctor/asciidoctor asciidoctor main.adoc


https://github.com/asciidoctor/docker-asciidoctor

https://hub.docker.com/r/asciidoctor/docker-asciidoctor/


Docker command explained

1 Delete container a�er run2 Use Volume $(pwd) actual path in Linux and Mac OS as /documents in container

Windows needs the complete path here!3 Image name (template for container)4 Run command asciidoctor in that container5 On document main.adoc

# Run this in the folder with your asciidoc files docker run \ --rm \ -v $(pwd):/documents/ \ asciidoctor/asciidoctor \ asciidoctor \ main.adoc

1

2

3

4

5



Different Outputs with Docker containerHtml

Html with Diagram

PDF with Diagram

docker run --rm -v $(pwd):/documents/ asciidoctor/asciidoctor asciidoctor main.adoc

docker run --rm -v $(pwd):/documents/ asciidoctor/asciidoctor asciidoctor -r asciidoctor-diagram main.adoc

docker run --rm -v $(pwd):/documents/ asciidoctor/asciidoctor asciidoctor-pdf -r asciidoctor-diagram main.adoc



Gradle

A full integrated Gradle implementation is used by

Check it out, if you need a full featured solution

Advantage

Downloads all dependencies

Works with DevOps toolsets

Gradle can be used with Gitlab CI/CD, Travis CI and Jenkins

https://github.com/asciidoctor/asciidoctor-gradle-examples

docToolchain


https://github.com/asciidoctor/asciidoctor-gradle-examples

https://github.com/docToolchain/docToolchain


CI/CD with Gitlab and GradleBest result

Converts on commit

Browse or download results

Deploy the documents to webservers

How to:

Add CI/CD to your Gitlab project

Create .gitlab-ci.yml



.gitlab-ci.yml1 Use docker image to build2 Install missing packages3 Name this stage4 Save path build/docs a�er execution5 Only run in master branch

image: frekele/gradle variables: GRADLE_OPTS: "-Dorg.gradle.daemon=false" before_script: - apt-get update && apt-get -y upgrade && \ apt-get -y install graphviz - export GRADLE_USER_HOME=`pwd`/.gradle build: stage: build script: gradle cache: key: "$CI_COMMIT_REF_NAME" policy: push paths: - build - .gradle artifacts: paths: - build/docs/ expire_in: 1 day name: "${CI_JOB_STAGE}" only: - master

1

2

3

4

4

5



build.gradle1 Thanks to

docToolchain2 Use asciidoctor

plugin3 Default when you

just run gradle4 The real magic

/* This build file is part of the docToolchain */ plugins { id "org.asciidoctor.convert" version "1.5.8.1" id "org.aim42.htmlSanityCheck" version "0.9.7" id "com.github.ben-manes.versions" version "0.15.0" } apply plugin:'groovy' dependencies { testCompile( ('junit:junit:4.12'), ('org.spockframework:spock-core:1.1-groovy-2.4'), ('com.athaydes:spock-reports:1.3.2'), ('org.slf4j:slf4j-api:1.7.13'), ('org.slf4j:slf4j-simple:1.7.13'), gradleTestKit() ) } apply from: 'scripts/AsciiDocBasics.gradle' defaultTasks 'generateHTML', 'generatePDF', 'generateDocbook'

1

2

4

3



Gitlab Pipeline

1 Build pipeline ran successful2 Failed execution3 Download artifacts (Output formats)



Demo



Additional informationsThis presentation is build with

Asciidoctor

Reveal.js

Fedora is using Asciidoc for

Based on

Antora creates documentation from multiple git repositories

https://docs.fedoraproject.org/en-US/docs/

Antora


https://docs.fedoraproject.org/en-US/docs/

https://antora.org/


LinksAsciidoc Syntax Quick Reference


Asciidoc Cheatsheet

Using AsciiDoc and Asciidoctor to write documentation

Mr. Haki Blog


https://asciidoctor.org/docs/asciidoc-syntax-quick-reference/


https://powerman.name/doc/asciidoc-827

http://www.vogella.com/tutorials/AsciiDoc/article.html

https://mrhaki.blogspot.com/

d ocu mentat i on wi t h any e d i tor · ms word / libreoﬀice with sharepoint or mail several...

Documents