@stoeps #froscon13 #AnyEditor1
Documentation With Any Editor
Christoph Stoettner
@stoeps #froscon13 #AnyEditor2
Thank youMy wife and my children
Organisation team of Froscon 2018
developers
developers
Thanks to all sponsors and attendees
Asciidoctor
DocToolChain
@stoeps #froscon13 #AnyEditor3
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
@stoeps #froscon13 #AnyEditor4
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
@stoeps #froscon13 #AnyEditor5
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
@stoeps #froscon13 #AnyEditor6
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
@stoeps #froscon13 #AnyEditor7
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
@stoeps #froscon13 #AnyEditor8
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
@stoeps #froscon13 #AnyEditor9
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
@stoeps #froscon13 #AnyEditor10
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
@stoeps #froscon13 #AnyEditor11
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
@stoeps #froscon13 #AnyEditor12
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...
@stoeps #froscon13 #AnyEditor13
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
@stoeps #froscon13 #AnyEditor14
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
@stoeps #froscon13 #AnyEditor15
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
@stoeps #froscon13 #AnyEditor16
Admonition Blocks in Html and PDFNOTE: A note TIP: Here is a tip IMPORTANT: That's important WARNING: Warning message CAUTION: Caution, be careful
@stoeps #froscon13 #AnyEditor17
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.
@stoeps #froscon13 #AnyEditor18
SourcecodeAdding [source]
Syntax Highlighting with Pygments, Highlightjs or Rouge
.A Python function [source,python] ---- def function(): var x = 10 return x ----
:source-highlighter: pygments
@stoeps #froscon13 #AnyEditor19
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
@stoeps #froscon13 #AnyEditor20
Example Include
Include in our asciidoc source
Included source
... <title>example</title> <!-- tag::stoeps[] --> <!-- even comments --> </head><body> <h1>Test</h1> <!-- end::stoeps[] --> </body> ...
[source, indent=0] ---- include::test.html[tags=stoeps] ----
<!-- even comments --> </head> <body> <h1>Test</h1>
@stoeps #froscon13 #AnyEditor21
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
@stoeps #froscon13 #AnyEditor22
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
@stoeps #froscon13 #AnyEditor23
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
@stoeps #froscon13 #AnyEditor24
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
@stoeps #froscon13 #AnyEditor25
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
@stoeps #froscon13 #AnyEditor26
Diagram - ditaa[ditaa] .... +-------------+ | Asciidoctor |-------+ | diagram | | +-------------+ | PNG out ^ | | ditaa in | | v +--------+ +--------+----+ /---------------\ | | --+ Asciidoctor +--> | | |Document| +-------------+ | Beautiful | | {d}| | !magic! | | Output | +---+----+ +-------------+ \---------------/ ....
@stoeps #froscon13 #AnyEditor27
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
@stoeps #froscon13 #AnyEditor28
Plantuml Simple Flowdiagram[plantuml] .... start if (Graphviz installed?) then (yes) :process all\ndiagrams; else (no) :process only __sequence__ and __activity__ diagrams; endif stop ....
@stoeps #froscon13 #AnyEditor29
Tables.Hostnames [%header, cols=3] |=== |Hostname |IP |Function |www.example.com |192.168.1.100 |Webserver |dmgr.example.com |192.168.2.100 |Application Server |db.example.com |192.168.2.101 |Database Server
@stoeps #froscon13 #AnyEditor30
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
@stoeps #froscon13 #AnyEditor31
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
@stoeps #froscon13 #AnyEditor32
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::[]
@stoeps #froscon13 #AnyEditor33
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
@stoeps #froscon13 #AnyEditor34
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::[]
@stoeps #froscon13 #AnyEditor35
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
@stoeps #froscon13 #AnyEditor36
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
@stoeps #froscon13 #AnyEditor37
Build OutputsLots of different Outputs
Html 5
ePub
Docbook
Confluence Wiki
Reveal JS Presentation
A huge amount of outputs:
https://doctoolchain.github.io/docToolchain/
@stoeps #froscon13 #AnyEditor38
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
@stoeps #froscon13 #AnyEditor39
MobileI use git for all documents
Version Control
Good mobile clients (for small adjustments)
Android
Termux
Vim
Git
@stoeps #froscon13 #AnyEditor40
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
@stoeps #froscon13 #AnyEditor41
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
@stoeps #froscon13 #AnyEditor42
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
@stoeps #froscon13 #AnyEditor43
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
@stoeps #froscon13 #AnyEditor44
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
@stoeps #froscon13 #AnyEditor45
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
@stoeps #froscon13 #AnyEditor46
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
@stoeps #froscon13 #AnyEditor47
.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
@stoeps #froscon13 #AnyEditor48
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
@stoeps #froscon13 #AnyEditor49
Gitlab Pipeline
1 Build pipeline ran successful2 Failed execution3 Download artifacts (Output formats)
@stoeps #froscon13 #AnyEditor51
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
@stoeps #froscon13 #AnyEditor52
LinksAsciidoc Syntax Quick Reference
https://doctoolchain.github.io/docToolchain/
Asciidoc Cheatsheet
Using AsciiDoc and Asciidoctor to write documentation
Mr. Haki Blog