Truly the DropCMS stack has changed our world: it allows 3 of us to collaborate on writing for a website in a very intuitive simple way.
Mathew

DropCMS is not just limited to using text files stored on DropBox, it can reference material from almost any cloud-based file sharing or web server with public access. Alongside support for plain text, DropCMS can also support basic HTML tags like lists, images, tables, video, definition lists and many other common HTML tags. There are no limits on how many DropCMS stacks you use in your project. The latest version of DropBox now supports the optional conversion of Markdown syntax to HTML.

There are many flexible ways of using DropCMS. As an example, you could create content on a website which a client is able to easily access and update from their computer. Or you could use DropCMS many times throughout a website, and allow multiple users to update their own pages. DropCMS has lots of open-ended possibilities.
 

Example

This is a real working example of the DropCMS stack. In this instance a new plain text file called test.txt was created and uploaded to DropBox, into the Public folder. The plain text file contains some basic HTML tags and content (which you're reading right now). If you click this link, you can see the source code. As you can see, it is possible to include elements such as pictures, and this whole block of content can be updated at anytime, from outside of RapidWeaver.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et erat ut lectus fermentum tincidunt. Donec sed leo risus. Sed ut eros mi, a pellentesque purus. Donec leo elit, facilisis euismod accumsan in, mollis vel massa. Donec at turpis massa, nec tincidunt erat. In venenatis dolor sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam euismod egestas facilisis. Aenean vestibulum sapien nec libero imperdiet semper. In risus nulla, eleifend at pharetra sodales, consectetur non justo. Phasellus faucibus, leo eget blandit semper, augue felis ullamcorper lectus, vel luctus urna quam quis nunc. Nullam vel nibh sit amet felis tincidunt convallis eu nec purus. Sed tempor velit ut nulla pretium sodales. Quisque dapibus massa non velit elementum quis aliquam nibh pharetra. In arcu mauris, bibendum eget laoreet at, congue vitae tortor.

Aenean sed lacus vitae ante sagittis pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam mattis velit sed odio sollicitudin dapibus. Aenean pellentesque lectus quis quam hendrerit vel rhoncus augue facilisis. Aenean tempus malesuada augue vitae commodo. Etiam sed lorem dolor, et congue mauris. Nullam sit amet erat nisl, ac imperdiet dolor. Donec vel ligula odio. Maecenas pretium leo sit amet libero vulputate molestie in at arcu. Suspendisse potenti. Maecenas pellentesque, dolor id scelerisque vehicula, magna dolor luctus lectus, ut ornare lectus ipsum ut ligula. Aenean ante libero, consectetur vel ultricies quis, feugiat sed lorem. Aenean sollicitudin erat quis massa imperdiet et malesuada dui malesuada. Ut id augue nisi, nec placerat ligula. Sed imperdiet neque eget nibh hendrerit accumsan. In eget dolor sem, quis volutpat urna. Proin tempor nunc vitae felis iaculis bibendum.

Table Cell Heading Table Cell Heading Table Cell Heading Table Cell Heading
Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell Table Cell


Setup

The first stage of using DropCMS is to create your content and store it in a public-accessible folder using one of the following services. If you will be the only content author, DropBox is probably best to use. If a small team of authors intend to collaborate and collectively edit content, InSync or your own web server could probably be the best options to store content.

  • DropBox

    In Finder, open your DropBox folder and navigate into the 'Public' folder. Create a new folder in here (call it something like 'web-content'). From this point onwards, any plain text, HTML or Markdown files for inclusion into the DropCMS stack should be stored here. Only the DropBox account holder would have access to modify files in this folder. Right-clicking on a text file in the DropBox folder and selecting Copy Public Address will provide you with the necessary URL to put in the DropCMS stack.

  • InSync

    In Finder, open your InSync folder and create a new sub folder called 'web-content' or similar. From this point onwards, any plain text, HTML or Markdown files for inclusion into the DropCMS stack should be stored here. In Finder, right-click the text file you want to use, and in the InSync menu, click Get Sharable Link. In the new web browser window that opens, tick both the Make Public option. Copy the URL provided and use this in the DropCMS settings. Anyone you grant permission to edit the file in Google Docs will be able to make modifications to the content.

  • Own Web Server

    Using your preferred FTP client, login to your web hosting account and create a new folder called 'web-content' or similar. From this point onwards, any plain text, HTML or Markdown files for inclusion into the DropCMS stack should be stored here. Back in the DropCMS settings, set the file path to the same address as the text file is stored at, for example: http://www.example.com/web-content/page6.txt. Anyone with FTP access to this directory you setup will be able to edit content.

  • Amazon S3

    Sign-in to your Amazon Simple Storage Solution (S3) account - either through the web interface or your FTP client. Create a new folder (sometimes referred to as a workspace or directory) called 'web-content' or similar. From this point onwards, any plain text, HTML or Markdown files for inclusion into the DropCMS stack should be stored here. Back in the DropCMS settings, set the file path to the same address as the text file is stored at, for example: http://www.example.com/web-content/page6.txt. Anyone with FTP access to this directory you setup will be able to edit content.
As mentioned already, once you have a URL to your published document, you enter this into the URL box in the DropCMS settings. If you are just 'pulling in' plain text or HTML files, there are no other steps required beyond this point. Once you export your website to a working server with PHP support, the DropCMS stack will begin working.

Important You may not be able to preview the DropCMS stack in RapidWeaver. But if you publish the website or view it in your sites folder (with PHP enabled) or in MAMP, you can test the DropCMS stack. This stack requires a web server with support for PHP 5, so it will not work with MobileMe hosting and will likely fail on cheap hosts like GoDaddy, NamesCo, or 1&1 (these companies often use non-standard versions of PHP or charge extra to enable PHP as part of your hosting package). Make sure that all text files are published using UTF-8 encoding and you have set the page encoding to either 'Automatic' or 'UTF-8' in the RapidWeaver Page Inspector.

Markdown Support

Markdown is a simple markup language, originally created by John Gruber and Aaron Swartz in 2004. It basically allows you to write in plain text format, then easily convert the syntax and content to structured HTML. It is continuing to grow in popularity, and is remarkably easy to learn. I actually used Markdown to write my final dissertation at university, instead of opting for MS Word. You can create Markdown documents using software such as BBEdit and ByWord. Or you can just use a plain text editor like TextEdit (Mac) or Notepad (Windows).

As of version 1.3.0, the DropCMS stack can now support Markdown. This means that the DropCMS stack is capable of importing your .txt or .md Markdown files from a server, converting them to HTML and embedding them within a page. This is achieved by making use of the excellent opensource Pagedown script by John Fraser, which handles the Markdown to HTML conversion brilliantly well (better than what I could write).

Screen Shot 2012-01-15 at 22.00.29
When you want to import a Markdown document into the DropCMS stack, tick the Markdown to HTML option in the DropCMS settings. This then reveals two other settings (shown on the right). The Hide Until Converted option should be ticked - this will hide the original unconverted Markdown document, so that only the processed (converted) document is ever shown. Setting the Javascript Call setting to 'External' will pull in the showdown.js file from the Google code directory, saving you about 50KB of bandwidth. If you would prefer to use the showdown.js file already bundled inside the stack, switch to the 'local' version instead. From this point onwards, DropCMS will be setup to import and convert your Markdown files. Markdown files being imported can either end in a .txt file extension, or they can use the regular .md file extension (it doesn't really matter either way).

Other Suggestions For Handling Markdown In RapidWeaver

Joe Workman makes an excellent little stack named Markdown. It lets you type your webpage contents directly in Markdown and have it converted to HTML. The stack comes with a great cheat sheet built-in to help you get up to speed with the Markdown syntax. If you are looking for a full RapidWeaver plugin which can handle Markdown to HTML conversion, look no further than the Code Complete plugin by Code Of Interest.

Source Code

This is the source code used to create each DropCMS stack. As you can see, it relies on the PHP CURL function, and retrieved data is echoed to the page.
<div id="dropCMS">
<?php
function curl_get_file_contents($URL)
{
$c = curl_init();
curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($c, CURLOPT_URL, $URL);
$contents = curl_exec($c);
curl_close($c);

if ($contents) return $contents;
else return FALSE;
}

echo curl_get_file_contents("http://www.example.com/path/to/file.txt");
?>
</div>
In the above code, change the URL http://www.example.com/path/to/file.txt to the name and location of your stored plain text file. Don't forget that the page extension must be changed to .php, on any pages where you decide to use this code snippet.

Optional
If using the source code and you want to support conversion of Markdown to HTML, enter this code below your PHP code:
<script src="http://pagedown.googlecode.com/hg/Markdown.Converter.js"></script>
Then enter this jQuery code in the page:
<script type="text/css">
var $dropcms = jQuery.noConflict();
$dropcms(document).ready(function(){

$dropcms(function() {
var $dropcmstext = $dropcms('#dropCMS'),
$dropcmspreview = $dropcms('
').insertAfter('#dropCMS'),
converter = new Markdown.Converter();
$dropcmspreview.html(converter.makeHtml($dropcmstext.text()));
});
$dropcms('#dropCMS').hide();
});
</script>
This jQuery Javascript code needs to go somewhere in your page after the jQuery call. If you are unsure where this jQuery call is or if your theme does not use jQuery, you can add a new call immediately above this jQuery code. Console in WebKit Inspector can help you identify any problems with getting this jQuery code working.

This code can be saved as code snippets in RapidWeaver, for use in non-stack pages. To do this, highlight the code in your web browser and then right-click on it. Select Copy from the popup menu, to save it to your clipboard. In RapidWeaver, open the snippets window by clicking View > Show Snippets from the RapidWeaver menu. In the snippets window, click the '+' button, in the bottom left. Type a name for the new snippet and paste the code into the box shown. From this point onwards, you will be able to easily retrieve code snippets in RapidWeaver and reuse them in different pages. You can customise the code to suit your requirements.


Credits

The Markdown language and documentation is authored by John Gruber, and released under the BSD license.
The Pagedown.js script used in this stack was originally written by John Fraser and is now released under the MIT license on Google Code.

Important information about DropCMS and DropBox


Update 6th July 2012: Public folders being discontinued

As of 31st July 2012, new DropBox accounts no longer have a 'Public' folder. Instead any file in a DropBox can be marked as 'public' and shared. To avoid the wrapper / iFrame page applied to shared files, click onto download page for the file. Right-click the Download button and copy the URL. Strip the &dl=1 from the address, and then you should have a file you can hot-link directly to.

Update 10th April 2013: Public files getting redirected

For some reason, DropBox has decided to redirect its http://dl.dropbox.com/ domain name to https://dl.dropboxusercontent.com without warning. The result of this is that the links to embedded files for quite a number of people have suddenly broken. The PHP Curl function is unable to get through the redirect DropBox has imposed. There are two options you have to get around this problem:

Option One:
In your DropCMS stacks, change all file links from http://dl.dropbox.com/ to https://dl.dropboxusercontent.com. So in the example shown above, the address changed from:
http://dl.dropbox.com/u/422052/stacks4stacks/test/dropcms/test.txt
to
https://dl.dropboxusercontent.com/u/422052/stacks4stacks/test/dropcms/test.txt
Then you can skip-around the new redirect and things should work the same as before.

Option Two:
In the stack settings, change the embed type from PHP Curl to PHP Echo. However beware that PHP Echo is largely considered as depreciated now. So your web host may not support it, and this could result in DropCMS failing to work. So option one is probably the best for most people.

Long term plans

Obviously maintaining a stack like this is an up-hill struggle when other parties (like DropBox) implement quite destructive changes. These changes either limit access to the stack for new users or break things for existing users. Plans to produce a paid 'pro' version of DropCMS have been largely killed-off now. It would be too much of a risk to take. So the plan currently is to maintain the stack 'as-is', but with no implied warranties or guarantees that it will still work after future DropBox changes. Please bare this in mind when choosing DropCMS for your next projects.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.

Stacks4Stacks

Stacks4Stacks provides quality stack elements for RapidWeaver, backed by fast and friendly expert support direct from the developer. All stacks are intended for use with the Stacks plugin and can be used in both fixed-width and responsive page layouts. These stacks can help you achieve new things in your web development projects, meet client objectives and basically get jobs done a whole lot faster! We provide a wide variety of both free and paid stack elements, suitable for various different tasks. Over the past few years, the Stacks4Stacks project has been responsible for bringing some of the most influential stack elements to RapidWeaver.

The entire Stacks4Stacks website was built using RapidWeaver and the Stacks plugin. The theme being used in this website is Volcano by ThemeFlood. Should you have any questions or comments about this website or any of the stack elements featured, please feel free to get in contact. Stacks4Stacks is hosted by the rather excellent Chillidog Hosting.

RapidWeaver is a registered trademark of Realmac Software LTD, Brighton, UK.



Top 10 Stacks4Stacks