Create a printable and portable Connections Product Documentation

The IBM Connections Product Documentation is only available as a set of Wiki Documents and in a accessible version (5 single html documents).

I don’t like both versions. Searching is hard and printing only single documents (to paper or pdf) is a torture. The format is only for a complete display, no mobile version and using only half of a display do not wrap the text.

So i want to have a converted document which is searchable, has numbered headlines and can be converted to mobi or kindle format.

2013-07-15_21-36-58

You want this too? How?

Requirements

I created a linux shell script which downloads the accessible version of the product documentation and removes / adds some lines. I added a alternative stylesheet (numbering headlines) and a javascript file (toc on top of the document). Copy both files to the directory of the html documentation.

Here the script and some explanations on it:

#!/bin/bash
wget -mk http://infolib.lotus.com/resources/connections/4.5.0/doc/accessible/admin/en_us/acc_p1.html
wget -mk http://infolib.lotus.com/resources/connections/4.5.0/doc/accessible/admin/en_us/acc_p2.html
wget -mk http://infolib.lotus.com/resources/connections/4.5.0/doc/accessible/admin/en_us/acc_p3.html
wget -mk http://infolib.lotus.com/resources/connections/4.5.0/doc/accessible/admin/en_us/acc_p4.html
wget -mk http://infolib.lotus.com/resources/connections/4.5.0/doc/accessible/admin/en_us/acc_p5.html

Download the html files inclusivly with images, scripts and stylesheets.

After downloading the files, change to the folder of acc_p1.html:

FILEPATH=infolib.lotus.com/resources/connections/4.5.0/doc/accessible/admin/en_us
cd $FILEPATH

Run tidy on the html files to seperate the html tags and indent the code:

for i in $(seq 1 5); do
    tidy -wrap 0 -c -i acc_p${i}.html > acc_p${i}_a.html
done

No remove the html header and toc of the files:

# remove head and foot (incl toc)
for i in $(seq 1 5); do
   sed '1,/<div class="nested0" role="main"/d;/<\/body>/,$d' acc_p${i}_a.html > acc_p${i}_b.html
done

Create a file with header informations (title, stylesheets):

sed '/< \/head>/,$d' acc_p1.html > head.html
sed -i 's/<link rel="stylesheet"[^/>]*>//g' head.html
sed -i '/<title>/d' head.html
echo '<link rel="stylesheet" type="text/css" href="custom.css" />' >> head.html
echo '</title><title>IBM Connections 4.5 CR1</title>' >> head.html
echo '<script type="text/javascript" src="toc.js"></script>' >> head.html
echo '<body>' >> head.html

Create a file with footer informations:

sed '/< \/body>/,$d' acc_p1.html > foot.html

Create a singe html file of the Connections documentation and add head and foot:

cat head.html > cnx45documentation.html
for i in $(seq 1 5) ; do
    cat acc_p${i}_b.html >> cnx45documentation.html
done
cat foot.html >> cnx45documentation.html

Rewrite all links and anchors to the new filename:

sed -i -e 's/href="acc_p[1-5].html#/href="cnx45documentation.html#/g' cnx45documentation.html

So you’re nearly done! Copy the custom.css and toc.js in the directory and you can open the documentation. You can use half display, print to pdf, convert it to kindle (e.g. calibre) and other ebook formats.

The script does not delete temporary files. I copy only cnxdocumentation.html, toc.js and custom.css to a seperate folder and delete the downloaded files. If you want the images (there are only few), you need to copy these too.

Configuration of toc.js

Here is my setting i used for the toc.

container : "false",
headline : 1,
minNavPoints : 2, 
insertAfter : "body",
headlineText : "Table of Contents",
listType : "OL", 

Download the script file.

custom.css

h1{counter-reset: h2counter}
h2{counter-reset: h3counter}
h3{counter-reset: h4counter}
h4{counter-reset: h5counter}
h5{counter-reset: h6counter}

h1:before{
  counter-increment: h1counter;
  content: counter(h1counter) " ";
}
h2:before{
  counter-increment: h2counter;
  content: counter(h1counter) "." counter(h2counter) " ";
}
h3:before{
  counter-increment: h3counter;
  content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) " ";
}
h4:before{
  counter-increment: h4counter;
  content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) "." counter(h4counter) " ";
}
h5:before{
  counter-increment: h5counter;
  content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) " ";
}

h6:before{
  counter-increment: h6counter;
  content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) "." counter(h6counter) " ";
}
body{font-family:sans-serif;
max-width:1024px;
min-width:300px;
left:auto;
right:auto;
font-size:12px;
}
p {
 font-size:11px;
 line-height:110%;
}

code,kbd {
 margin:10px;
}
h1,h2,h3,h4,h5,h6{
 color:darkblue;
 font-weight:bold;
 font-size:110%;
}

You can download the script and css file on github:

https://github.com/stoeps13/ibmcnxscripting/tree/master/web/createdocu

.