Web interface for NanoBlogger: Add entries.

Wed Apr 21 15:55:50 EDT 2010

Please bare in mind that this is a proof of concept (that works) but here it is a web interface that allows you to submit entries to NanoBlogger through a BASH CGI. The script is rather simple, it just takes the fields title, description and body then writes it to a text file, you can latter process it through a cronjob or just leave it there for then you get a chance parse it by nb.

For this we will be using 3 code segments, the first would be the HTML form that will allow us to enter the content and pass those values to the CGI besides those two we have a javascript segment that allow us to preview the actual article that we are submitting.

The Form.
In other to have a bit of eye-candy i decided to use the heather and cascade style sheet from the actual style i am using for NanoBlogger. I found that the easiest way was to create a file by running `nb -b /path/of/the/blog/ make-file nb_send_entry.txt`. This will create a template that we can use to add the form HTML inside the 'BODY' section.

<form name="nb_entrada_send" method="post" ACTION="http://orvtech.com/send_nb_entry.cgi"><table border="0" width="600">
<tr>
<td width="100px">Titulo:</td>
<td width="500px"><input type="text" size="60" maxlength="50" id="title" name="entrada_title" value="Enter Title Here"></td>
</tr>
<tr>
<td width="100px">Descripcion:</td>
<td width="500px"><input type="text" size="60" maxlength="100" id="description" name="entrada_description" value="Enter Description Here"></td>
</tr>
<tr>
<td colspan="2">Contenido:<br />
< textarea cols="75" rows="30" id="body" name="entrada_body">
HTML esta permitido.
</ textarea>
</td>
</tr>
<tr>
<td width="600" colspan="2">
<div align="center "style="margin: auto; align: center; width: 600px;">
<input type="button" name="preview" value="Vista Previa" onclick="return openPreview();" />
  <input type=submit value="Enviar" />  
<input type="reset" value="Cancelar" />
</div>
</td>
</tr>
</table></form>

The product of this code is a web page with the same look and feel that the blog has. Here is a sample from our Spanish site:

The JavaScript.
If you take a look at above source code we have a 'preview' button; this button calls the function openPreview. The idea of this function is to show how would the HTML that we are codding look using the current style. You can get a good idea on how would this entry look before you submit it. Here is the code:

<script language="JavaScript">
function openPreview()
{
features = 'width=800, height=600, toolbar=no, menubar=no, resizable=no, location=no, directories=no, status=no';
var popWin = window.open ('','Preview_Entry', features);

var popTitleText = popWin.document.getElementById("title");
var titleText = document.getElementById("title");
var popBodyText = popWin.document.getElementById("body");
var bodyText = document.getElementById("body");

popWin.document.writeln('<head><title>Submit an Entry | Linux y el NSLU2</title><link rel="stylesheet" href="/styles/nb_default.css" type="text/css" media="all" /><link rel="shortcut icon" href="/favicon.ico" /></head><body> <div class="border"> <div class="container">  <div id="topmenu">  <ul>  <li><a href="/index.html" title="Inicio"><span>Inicio</span></a></li>  <li><a href="/gallery.html" title="Galería"><span>Galería</span></a></li>  <li><a href="/archives/scripts/index.html" title="BASH Scripts"><span>Scripts</span></a></li>  <li><a href="/articles/el_nslu2/" title="El NSLU2"><span>El NSLU2</span></a></li> <li><a href="/archives/scripts/index.html" title="Linux"><span>Linux</span></a></li> <li><a href="http://orvtech.com/index.html" title="orvtech.com in english"><span>In English</span></a></li>  </ul>  </div> <div id="header"></div><div class="container"><div class="archives"><div class="blogbody"> <h3 class="title">' + titleText.value + '</h3>' + bodyText.value + '</div></div></div></div></div></body>');

popTitleText.value = titleText.value;
popWin.document.close();
}
</script>

As you can see we are defining a new window and opening it with the content we entered on the form, it uses the nb_default.css. Most of the customizations can be done on in popWin.document.writeln in case you want to adapt it to your blog. Remember that this is a proof of concept and that it can still be improved, perhaps we can latter make it to read the blog.conf file. Here is a screenshot of how it looks.

All you need is BASH.
A CGI codded in bash to create the new entry for the blog. Here is the source code of send_nb_entry.cgi


#!/bin/bash

echo "Content-type: text/html"
echo -e "Status: 200 \n"
echo -e "<html><head><meta http-equiv=\"refresh\" content=\"2;url=http://orvtech.com\"></head><body><p>ENTRY ACCEPTED IN FOR QUEUE</p></body></html>"

DRAFT_ENTRY_DIRECTORY="/tmp"
POST_DATA=$(</dev/stdin)
TEMP_FILE="/tmp/nb_cgi_send_nb_entry.tmp"

nb_entrada_title=`echo $POST_DATA | sed -n 's/^.*entrada_title=\([^&]*\).*$/\1/p' | sed -e 's/%20/ /g'| sed 's/+/ /g'| sed 's/\%0[dD]//g' | awk '/%/{while(match($0,/\%[0-9a-fA-F][0-9a-fA-F]/)) {$0=substr($0,1,RSTART-1)sprintf("%c",0+("0x"substr($0,RSTART+1,2)))substr($0,RSTART+3);}}{print}'`
nb_entrada_description=`echo $POST_DATA | sed -n 's/^.*entrada_description=\([^&]*\).*$/\1/p' | sed -e 's/%20/ /g'| sed 's/+/ /g'| sed 's/\%0[dD]//g' | awk '/%/{while(match($0,/\%[0-9a-fA-F][0-9a-fA-F]/)) {$0=substr($0,1,RSTART-1)sprintf("%c",0+("0x"substr($0,RSTART+1,2)))substr($0,RSTART+3);}}{print}'`
name_entrada_tmp=`date +%Y-%m-%dT%H_%M_%S.tmp`
echo "TITLE: $nb_entrada_title" > $TEMP_FILE
echo "AUTHOR:" >> $TEMP_FILE
echo "DATE:" >> $TEMP_FILE
echo "DESC: $nb_entrada_description" >> $TEMP_FILE
echo "FORMAT: raw" >> $TEMP_FILE
echo "-----" >> $TEMP_FILE
echo "BODY:" >> $TEMP_FILE

echo $POST_DATA | sed -n 's/^.*entrada_body=\([^&]*\).*$/\1/p' | sed -e 's/%20/ /g'| sed 's/+/ /g'| sed 's/\%0[dD]//g' |\
   awk '/%/{while(match($0,/\%[0-9a-fA-F][0-9a-fA-F]/))\
       {$0=substr($0,1,RSTART-1)sprintf("%c",0+("0x"substr(\
       	      $0,RSTART+1,2)))substr($0,RSTART+3);}}{print}' >> $TEMP_FILE

	      echo "END-----" >> $TEMP_FILE
	      mv `echo -e $TEMP_FILE` `echo -e $DRAFT_ENTRY_DIRECTORY/$name_entrada_tmp`

We can latter import the file defined by $DRAFT_ENTRY_DIRECTORY/$name_entrada_tmp issuing the command:

nb -b /path/to/your/blog import entry /tmp/2010-03-02T15_02_01.tmp

This will add the entry to our blog. I though about automating this in the CGI but at this point i prefer to create a central control panel and keep things separated.

Spanish version: Interfaz web para agregar entradas a NanoBlogger.