Editorial Workflows

Bobbi

public workflow

Install Workflow...

This workflow contains at least one Python script. Only use it if you trust the person who shared this with you, and if you know exactly what it does.

I understand, install the workflow!

This is a workflow for Editorial, a Markdown and plain text editor for iOS. To download it, you need to view this page on a device that has the app installed.

Description: Is this fun or what?

Easily make a simple website and host it from a free Dropbox account. This workflow creates a website like a one-page blog - it takes the markdown files in a Dropbox folder, joins them together (newest first), converts to html and writes it to the same Dropbox folder. Then you can share the link to your website. Then, hack this to a one-page-per-file website, or a one-page-one-file website.

Inspired by Nicoletta (Python) by Roberto Alsina, king of the short piece of quirky code, and named for him.

Comments: Comment Feed (RSS)

There are no comments yet.

+ Add Comment

Workflow Preview
How to use this workflow ?
Source Code
"""
Bobbi - Peter Hopcroft, February 2014.

Easily make a simple website and host it from a free Dropbox account. This workflow creates a website like a one-page blog - it takes the markdown files in a Dropbox folder, joins them together (newest first), converts to html and writes it to the same Dropbox folder. Then you can share the link to your website. Then, hack this to a one-page-per-file website, or a one-page-one-file website.

Inspired by Nicoletta (Python) by Roberto Alsina, king of the short piece of quirky code, and named for him, see:
    http://ralsina.me/weblog/posts/nicoletta-nikolas-little-sister.html


The first time you run the workflow:
(this requires the free iOS Dropbox app)

1 - Use Editorial to make a folder in Dropbox, called by the name you want your website to have. Best to use A-Z, a-z and 0-9.
  
2 - Create a few Markdown files in your website folder.

3 - Open one of your website markdown files in Editorial and run the workflow. This creates an html file in your Dropbox folder, called by the name of your Dropbox folder.

4 - Find the link to your html file: run the iOS Dropbox app, select your html file, tap share, tap 'Copy Link', which puts the link on the clipboard.

6 - Open an iOS browser and paste the link into the address. In the link, change '.../www.dropbox..' to '../dl.dropbox..'. Tap Go and see your website appear. Magic.
  
7 Bookmark your website.

  
To change your website:
	
1 - Edit, create or delete your markdown files in your website folder.

2 - Open one of your markdown files in Editorial and run the workflow. It takes a few seconds before Dropbox serves the new html.


Note:
	
- Up to 20 GB of traffic per day from a free Dropbox account.
  
- Go to www.tinyurl.com to get a humane URL for the website.

"""
Create a variable, DropboxPath, to use later ?
Variable Name
DropboxPath
Value
Get CSS ?
Source Code
#coding: utf-8

# CSS for Bobbi - Peter Hopcroft, February 2014.

import workflow

css = """

body	{font-size: x-large;
			font-family: Georgia, Constantia, 'Lucida Bright', Lucidabright, 'Lucida Serif', Lucida, 'DejaVu Serif', 'Bitstream Vera Serif', serif;
			width: 30em;
			margin-left: auto;
			margin-right: auto;			
			line-height: 140%;
}

p, ul, ol, li, table, th, tr {
			margin-top: 0.5em; margin-bottom: 0em;
			vertical-align: baseline; 
}

h1		{font-size: xx-large;
			font-weight: bold; 
			margin-top: 1.5em;
			margin-bottom: 0em;
}

h2, h3, h4, h5, h6		
			{font-size: x-large;
			font-weight: bold;
			/*font-style: italic;*/
			margin-top: 1em;
			margin-bottom: 0em;
}

em		{font-style: italic;}
strong	{font-weight: bold;}
code	{font-size: medium; font-family: 'Courier', monospace;}

ul		{list-style: square outside;}
ol		{list-style-type: decimal;}

img		{width: 100%;}
.thumbnail {width: 20%;}

table	{border-top: thin solid grey; 
			border-bottom: thin solid grey;
}

th, td	{padding-left: 0.5em; padding-right: 0.5em;
			padding-top: 0.5em; padding-bottom: 0.5em;
			text-align:left;
}

th		{font-weight: bold;}

hr		{margin-top: 1.5em;
			width: 100%;
			color: grey;
			background-color: grey;
			height: 0.5px;
}

"""

workflow.set_output(css)
Join the Markdown files, then convert to HTML ?
Source Code
#!/usr/bin/env python
#coding: utf-8
#
# Bobbi - Peter Hopcroft, February 2014.
#
# input variables:	Input: a css for the website html
#                   DropboxPath: variable must exist
# output variables:	Output: the html for the website
#                   DropboxPath: relative path to write html in Dropbox

import codecs
import console
import editor
import functools
import glob
import markdown
import os
import urllib
import workflow

# template for a post, markdown ----------
TPOST = """

<div id="{Tlink}"></div>

{Ttext}

-----

"""

# template for the webpage body, markdown ----------
TBODY = """# {Tname}

{Ttoc}

-----

{Tposts}

</body>
</html>

"""

# template for the webpage, html ----------
TPAGE = """<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{Ttitle}</title>
<style type="text/css">
{Tcss}
</style>
</head>
<body>
{Tbody}
</body>
</html>

"""

# template for a message to user ----------
TMSG = """
Website name: {Tsite}

Dropbox path to write html to:
{Tdbp}

Names of post files, in order:
{Tnames}
"""

# end of templates ----------

MARKDOWN_EXT = '.md'
DROPBOX_MARK = '/Dropbox/'

def split_dpfe(full_path):
    d, f_e = os.path.split(full_path)
    x, p = os.path.split(d)    
    f, e = os.path.splitext(f_e)
    return  d, p, f, e	# directory, parent, file name, extension

console.clear()
css = workflow.get_input()

# get current file data
ed, ep, ef, ee = split_dpfe(editor.get_path())
page_name = urllib.quote(ep)	# website name is parent folder
if (ee !=  MARKDOWN_EXT) or (not DROPBOX_MARK in ed):
    console.alert ('You need a markdown file open in your Dropbox folder of posts')
else:
	
    # get markdown post files
    md_files = glob.glob(os.path.join(ed, '*' + MARKDOWN_EXT))
    md_files.sort (key=os.path.getmtime, reverse=True)	# newest first
    
    # accumulate the posts, toc and names
    posts = ''
    toc = '| '
    names = '| '
    for md_file in md_files:
        d, p, f, e = split_dpfe(md_file)
        link = urllib.quote(f)                   # link name = file name
        toc += '[' + f + '](#' + link + ') | '   # a markdown link
        with codecs.open(md_file, 'r', 'utf-8') as mf:
            text = mf.read()
        posts += TPOST.format (Tlink = link, Ttext = text) # post template
        names += f + ' | '

    # make the html
    body = TBODY.format (Tname=page_name, Ttoc=toc, Tposts=posts)
    body = markdown.markdown(body, extensions=['tables'])
    page = TPAGE.format (Tcss=css, Ttitle=page_name, Tbody=body)    

    # get dropbox path to write html to
    x, dr, pa = ed.partition (DROPBOX_MARK)
    dbp = os.path.join(pa, page_name + '.html')
    
    # set output variables
    # ideally we would use editor.set_file_contents here, but it has a bug
    workflow.set_variable('DropboxPath', dbp)
    workflow.set_output(page)

    # say what is happening, can cancel this        
    msg = TMSG.format (Tsite=page_name, Tdbp=dbp, Tnames=names) # msg template
    console.alert('Ready to write html to Dropbox', msg, 'OK')
Write website html to Dropboxpath ?
File Name
%var:DropboxPath
In Dropbox
ON
New Text
Input
If File Does Not Exist
  • Create
  • Stop Workflow
Show HUD ?
HUD Text
Done
Duration
  • 1 Second
  • 2 Seconds
  • 3 Seconds
Icon
  • "Success"
  • "Error"