Live editing of pages, forms and CSS on Linux

Ever dreamt of this when working on a local install of Textpattern: open your favorite text or image editor, make some changes, save, and instantly see your Textpattern site updated in the browser?!

Overview

It’s quite easy in Linux thanks to the powerful incron utility. You’ll be able to monitor any change inside a list of folders and files, and execute a custom script at the very millisecond this change takes place.

Next, we need to be able to load or refresh a page through a script. Sadly, Firefox’s command line can’t load an URL without opening a new tab each time. Opera does this perfectly, and is faster anyway! I would have prefered to find a command line option which refreshes the current page; this doesn’t seem to exist among the browsers I tried. We’ll have to hardcode the page’s URL inside the script.

Finally, we want to work with Textpattern. As you probably know, our CMS doesn’t deal with local files, but instead stocks everything into the database. We’d rather work with simple text files: there comes the last brick: the cnk_versioning plugin does the job, and well: TXP pages, forms and CSS are stocked as textfiles inside folders. At each page refresh, the plugin loads the files into the database, and here we are: our changes magically appear in the browser.

There’s one problem left: Opera refuses to take CSS changes into account. It uses a cached version of the style sheet as long as the file’s name doesn’t change . One clever workaround I found on the web: add some random php variable after the CSS’s URL. Opera will be tricked by the changed URL, and Textpattern will return the correct file anyway. This implies we can’t use the <txp:css /> tag, at least during site developement: it doesn’t allow URL customisation.

Installation

Here we talk about local developement, I take for granted that a web server (Apache), MySql and Textpattern are already installed and working.

Download latest version of cnk_versioning and install. Please, read the instructions carefully before activating the plugin. There’s no help included, but the forum’s thread is detailed enough. I suggest you make the created folders publicly writable before the installation process, and then restrict them again for good measure.

You should now have your site in “testing” state, “css”, “pages” and “forms” folders at the root of your install, and several files inside.

You’ll probably have permissions headaches if you want to modifiy the CSS, pages and forms files automatically added. Open a terminal, change to your Txp install root directory, and type:

sudo chown -R $USER ./forms
sudo chown -R $USER ./pages
sudo chown -R $USER ./css

Now install Opera.

Install incron, which should be done easily through the package manager of your Linux distribution. For example, in a Debian based distro:

sudo apt-get install incron

The incron table

This is where we tell the incron daemon which files and folders to keep an eye on, what kind of change should be reported, and finally what to do when this happens. Folders monitoring is not recursive, i.e. folders inside folders have to be declared too.

Within your home folder create the “script” folder. Inside, add the “incron” folder.

There, create a text file, name it “incrontable”, and paste this:

/path/to/local/textpattern/install/css IN_MODIFY,IN_NO_LOOP /home/myusername/scripts/incron/refresh-opera.sh
/path/to/local/textpattern/install/pages IN_MODIFY,IN_NO_LOOP /home/myusername/scripts/incron/refresh-opera.sh
/path/to/local/textpattern/install/forms IN_MODIFY,IN_NO_LOOP /home/myusername/scripts/incron/refresh-opera.sh

Don’t forget to replace “myusername”. Of course, you can customise the paths as you want. Be aware that full, absolute paths are required!

The scripts

Create the “start.sh” script, inside your script/incron folder:

#!/bin/sh
sudo incrond -k
sleep 2
sudo incrontab /home/myusername/scripts/incron/incrontable
sudo incrond
exit 0

Create the “refresh-opera.sh” script in the same folder:

#!/bin/sh
sudo -u myusername opera -remote "openURL(http://localhost/path)"
exit 0

Change all “myusername”.
Make “http://localhost/path” point to a local URL where the changes will be visible. You can change this local URL anytime, Opera will reflect it at next page reload.
Make both scripts executable.

Start the daemon

Open a terminal and type

~/scripts/incron/start.sh

Enter your password at the prompt. From now on, changes in the specified folders are monitored.

Use

Always start Opera first!
Open a page, for example “default.txp”, with a text editor.
Write just after the opening <body> tag: <h1>"HELLO WORLD"</h1>
As soon as you save, your page should be updated in the browser.

Replace the CSS tag

Comment the <txp:css /> tag inside each page template.
Add this to call the stylesheet:

<link rel="stylesheet" type="text/css" media="screen" href='css/default.css?<txp:php>echo time();</txp:php>' />

Enjoy!

comments powered by Disqus